Internet Explorer不顯示元素

Question

Internet Explorer（8+）沒有顯示我的某些元素，就像其他瀏覽器一樣。 我正在嘗試制作一個如下所示的自適應3d橫幅：

橫幅廣告適用於歌劇，野生動物園，Chrome瀏覽器，但Internet Explorer無法使用。

IE顯示以下內容：

這是我的代碼：

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

即時通訊使用以下CSS：

    .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;
}

如果它在我的標頭中使用此標記使我的網站可以在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]-->

Answer 1

看起來問題出在邊框配置上。 嘗試這個：

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

簽入IE8 +： http : //jsfiddle.net/9mwvavbe/1/

Answer 2

在.banner:before, .banner:after將border-top樣式設置為solid， border-top: 10px solid #5C5C5B; 。