爲什麼箭頭無法顯示在IE7中？

我發現下面的代碼可以在IE8，IE9和Firefox上完美運行，但無法在IE7上運行良好，向上箭頭無法顯示，爲什麼？爲什麼箭頭無法顯示在IE7中？

CSS：

.arrow_box { 
    position: relative; 
    background: #88b7d5; 
    border: 4px solid #c2e1f5; 
} 
.arrow_box:after, .arrow_box:before { 
    bottom: 100%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

.arrow_box:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-bottom-color: #88b7d5; 
    border-width: 30px; 
    left: 50%; 
    margin-left: -30px; 
} 
.arrow_box:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-bottom-color: #c2e1f5; 
    border-width: 36px; 
    left: 50%; 
    margin-left: -36px; 
}

HTML：

<br/> 
<br/> 
<br/> 
<div class="arrow_box"><h1 class="logo">css arrow please!</h1></div>

來源

2013-10-12 Harim

:before和:after選擇不支持IE7。

你要麼改變你的CSS不使用:before和:after，或者你可以使用基本上模仿這些選擇器使用javascript的行爲的js shiv。以下是關於如何做到這一點的post。

來源

2013-10-12 07:00:10 jbarnett

爲什麼箭頭無法顯示在IE7中？

回答

相關問題