曲折的邊框完成的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; 
}