2015-02-05 162 views
1

Internet Explorer(8+)沒有顯示我的某些元素,與其他瀏覽器一樣。我試着做一個負責任的3D橫幅看起來像下面這樣:Internet Explorer未顯示元素

enter image description here

旗幟工作在歌劇,Safari,Chrome,但IE瀏覽器無法正常工作。

IE顯示以下內容:

enter image description here

這裏是我的代碼:使用下面的CSS

<div class="banner"> 
      <div class="text-center"> 
       text here 
      </div> 
</div><!--/banner--> 

IM:

.banner{ 
    position:relative; 
    height:80px; 
    background: #2859a6; 
    margin: 0 -40px; 
} 
.banner:before, .banner:after{ 
    content:''; 
    position:absolute; 
    bottom:-10px; 
    border-top:10px dotted #5C5C5B; 
} 
.banner:before{ 
    left:0; 
    border-left:25px solid transparent; 
} 
.banner:after{ 
    right:0; 
    border-right:25px solid transparent; 
} 

如果使用任何差別的IM這在我的頭允許我的網站工作在舊版本的IE瀏覽器。

<meta http-equiv="X-UA Compatible" content="IE=edge, chrome=1"> 

    <!-- Stylesheets --> 

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"> 
    <script src="bootstrap/js/bootstrap.js"></script> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 

    <!--[if lte IE 8]> 
    <script src="bootstrap/js/html5shiv.js"></script> 
    <script src="bootstrap/js/respond.min.js"></script> 
    <link rel="stylesheet" href="css/ie8.css"> 
    <![endif]--> 
+0

缺少/不正確的DocumentType定義? – Teemu 2015-02-05 15:25:33

+0

對不起,dtd是什麼? – RMD2411 2015-02-05 15:27:42

+3

[下次嘗試使用Google自定義](http://en.wikipedia.org/wiki/Document_type_definition) – giorgio 2015-02-05 15:29:19

回答

1

.banner:before, .banner:after組邊框頂部作風紮實,border-top: 10px solid #5C5C5B;

+0

謝謝你,訣竅。 – RMD2411 2015-02-05 16:33:44

1

看起來問題是有邊界配置。在IE8 +

.banner:before, .banner:after { 
    content: ''; 
    position: absolute; 
    bottom: -10px; 
    border-style: solid; 
    border-width: 10px 0 0 0; 
    border-color: #5C5C5B transparent transparent transparent; 
} 

檢查:試試這個http://jsfiddle.net/9mwvavbe/1/

+0

謝謝你,工作出色。 – RMD2411 2015-02-05 16:33:13

+0

好!隨時接受幫助你的答案。 – dfsq 2015-02-05 18:12:12