CSS伪元素：before& ：在Internet Explorer中工作不同 [英] CSS Pseudo-elements :before & :after work differently in Internet Explorer

问题描述

我有一个非常具体的问题，因为我试图创建一个导航有角度使用纯CSS没有图像或javascript。我已经计算出来，以便它工作完美，但我遇到的问题是，IE 9和Chrome看起来不同。我可以通过改变伪元素的边距来工作，但我更喜欢单一的解决方案在两者中工作。如果任何人可以弄清楚为什么边距不同，并给我一个单一的CSS解决方案，在两个浏览器，这将是巨大的工作。否则我必须为IE添加一个单独的类，并强制它使用单独的CSS条目。

I have a very specific problem as I am trying to create a navigation that has angles using purely CSS without images or javascript. I have figured it out so that it works perfectly but the problem I am coming across is that IE 9 and Chrome look different. I can get both to work by changing the margins of the pseudo elements but I would prefer a single solution to work in both. If anyone can figure out why the margins are different and give me a single CSS solution to work in both browsers that would be great. Otherwise I will have to add a seperate class for IE and force it to work using a seperate CSS entry.

这里是jsfiddle使用 arrow-nav

Here is the jsfiddle to work with 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;
}

推荐答案

绝对定位在伪元素上。要使此工作正常，将 ul li 的位置设置为relative（这将导致绝对位于其中的元素相对于li）。然后，更新伪元素的位置以使用 left 而不是 margin-left ：

You can fix this by using absolute positioning on the pseudo elements. To make this work correctly, set the position of ul li to relative (which will cause elements positioned absolutely within it to be relative to the li). Then, update the position of the pseudo elements to use left instead of 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/

这篇关于CSS伪元素：before& ：在Internet Explorer中工作不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！