CSS伪元素：之前和：在Internet Explorer中以不同的方式工作

Question

我有一个非常具体的问题，因为我试图创建一个导航，使用纯粹的CSS没有图像或JavaScript的角度。我已经弄明白了，所以它可以很好地工作，但我遇到的问题是IE 9和Chrome看起来不一样。我可以通过改变伪元素的边界来让它们工作，但我更喜欢单个解决方案在两者中工作。如果任何人都能弄清楚为什么边距不同，并给我一个单一的CSS解决方案在两个浏览器中工作，那将是非常棒的。否则，我将不得不为IE添加一个单独的类，并强制它使用单独的CSS条目工作。

这里是的jsfiddle与arrow-nav

这里工作，是HTML

<ul> 
    <li><a href="#" >Some Navigation</a></li> 
    <li><a href="#">More navigation</a></li> 
    <li><a href="#">Another Nav</a></li> 
    <li><a href="#">Test Nav</a></li> 
    <li><a href="#">A Test Navigation</a></li> 
</ul> 

的CSS

ul { 
    float:right; 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    width: 300px; 
} 
ul li a { 
    float:left; 
    width:300px; 
} 
ul li{ 
    float:left; 
    width: 300px; 
    height:50px; 
    line-height:50px; 
    text-indent:10%; 
    background: grey; 
    margin-bottom:10px; 
    border:1px solid black; 
} 
ul li:before { 
    content:""; 
    position:absolute; 
    margin-top:-1px; 
    border-top: 26px solid transparent; 
    border-bottom: 26px solid transparent; 
    border-right: 21px solid black; 
    margin-left:-22px; 
} 
ul li:after { 
    content:""; 
    position:absolute; 
    border-top: 25px solid transparent; 
    border-bottom: 25px solid transparent; 
    border-right: 20px solid grey; 
    margin-left:-320px; 
} 

Answer 1

您可以通过使用伪元素绝对定位解决这个问题。为了使其正确工作，请将ul li的位置设置为相对位置（这将导致绝对位于其中的元素相对于li）。然后，更新伪元素的位置使用left，而不是margin-left：

ul li{ 
    position: relative; // Add this. 
    float:left; 
    width: 300px; 
    height:50px; 
    line-height:50px; 
    text-indent:10%; 
    background: grey; 
    margin-bottom:10px; 
    border:1px solid black; 
} 
ul li:before { 
    content:""; 
    position:absolute; 
    margin-top:-1px; 
    border-top: 26px solid transparent; 
    border-bottom: 26px solid transparent; 
    border-right: 21px solid black; 
    left:-22px; // Update from margin-left to left 
} 
ul li:after { 
    content:""; 
    position:absolute; 
    border-top: 25px solid transparent; 
    border-bottom: 25px solid transparent; 
    border-right: 20px solid grey; 
    left:-20px; // Update from margin-left to left 
} 

http://jsfiddle.net/ryanbrill/jSdWR/5/

Answer 2

你需要指定的元素（例如top位置和left值）。出于某种原因，我不完全理解 - 要添加position: relative到li（不是ul）：

http://jsfiddle.net/jSdWR/4/