javascript - Internet Explorer 不显示元素

Question

Internet Explorer (8+) 没有显示我的一些元素，而其他浏览器则显示。我正在尝试制作如下所示的响应式 3d 横幅:

横幅适用于 Opera、Safari、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;
}

如果我在我的 header 中使用它以允许我的网站在旧版本的 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中设置border-top样式为solid，border-top: 10px solid #5C5C5B;.