曲折的边框完成的CSS不工作在IE中

Question

在我的clients site我使用曲折的CSS边框（因为我想避免图像使用的原因 - 我使用不同的颜色等）。

我的版本在Chrome和Firefox（使用Windows）下工作正常，但在Internet Explorer中无法正常工作。我在windws上使用IE 11而不工作。我不知道如何解决这个问题，我甚至还添加了-webkit前缀和其他内容。有人可以帮助我吗？

我的灵感来自于this site，它似乎在IE 11中工作，但我不知道我的情况有什么不同。

div.zigzag > .container { 
 
    padding-bottom: 40px; 
 
    padding-top: 20px; 
 
} 
 
.zigzag { 
 
    position: relative; 
 
} 
 
.zigzag:before { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: -10px; 
 
    width: 100%; 
 
    height: 10px; 
 
} 
 
.zigzag:after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 10px; 
 
} 
 
/* blue */ 
 

 
.blue { 
 
    background: #2c7892; 
 
    color: #fff; 
 
} 
 
.zigzag.blue:before { 
 
    background: linear-gradient(45deg, transparent 33.333%, #2c7892 33.333%, #2c7892 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #2c7892 33.333%, #2c7892 66.667%, transparent 66.667%); 
 
    background: -webkit-linear-gradient(45deg, transparent 33.333%, #2c7892 33.333%, #2c7892 66.667%, transparent 66.667%), -webkit-linear-gradient(-45deg, transparent 33.333%, #2c7892 33.333%, #2c7892 66.667%, transparent 66.667%); 
 
    background-size: 10px 20px; 
 
} 
 
.zigzag.blue:after { 
 
    background: linear-gradient(45deg, #2c7892 33.333%, transparent 33.333%, transparent 66.667%, #2c7892 66.667%), linear-gradient(-45deg, #2c7892 33.333%, transparent 33.333%, transparent 66.667%, #2c7892 66.667%); 
 
    background: -webkit-linear-gradient(45deg, #2c7892 33.333%, transparent 33.333%, transparent 66.667%, #2c7892 66.667%), -webkit-linear-gradient(-45deg, #2c7892 33.333%, transparent 33.333%, transparent 66.667%, #2c7892 66.667%); 
 
    background-size: 10px 20px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row clearfix zigzag blue"> 
 
    <div class="container"> 
 
    <div class="col-md-12 column"> 
 
     Some Text Here. 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

问题是通过从自举clearfix伪元件继承了display: table属性引起的。

确保display: block属性通过使伪元素更具体而被应用。最简单的方法是在.zigzag:before和.zigag:after之间附加“div”：

div.zigzag:before { 
    content: ""; 
    display: block; 
    position: absolute; 
    top: -10px; 
    width: 100%; 
    height: 10px; 
} 
div.zigzag:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    width: 100%; 
    height: 10px; 
}