Internet Explorer不显示元素

Question

Internet Explorer（8+）并未显示我的某些元素，与其他浏览器一样。我试图制作一个响应式3D横幅，如下所示：

横幅适用于歌剧，野生动物园，铬，但互联网资源管理器不会工作。

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;。