[英]CSS Pseudo-elements :before & :after work differently in Internet Explorer
我有一个非常具体的问题,因为我正在尝试使用纯CSS而不使用图像或javascript来创建具有角度的导航。 我已经弄清楚了它是完美的,但我遇到的问题是IE 9和Chrome看起来不同。 我可以通过改变伪元素的边距来使两者都工作,但我更愿意使用单个解决方案来兼顾两者。 如果有人能够弄清楚为什么边距不同,并给我一个单独的CSS解决方案,在两个浏览器中工作都会很棒。 否则,我将不得不为IE添加一个单独的类,并使用单独的CSS条目强制它工作。
这是使用arrow-nav的jsfiddle
这是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
:
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
}
您需要指定元素的位置(例如, top
和left
值)。 由于某种原因,我不完全理解 - 添加position: relative
对于li
(不是ul
):
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.