Internet Explorer上的:before和:after选择器 [英] :before and :after selectors on internet explorer
问题描述
我有一些使用:before和:after选择器的css代码:
I have some css code that use :before and :after selectors:
.caption-wrap .line-3:before,
.caption-wrap .line-3:after {
content: " ";
position: absolute;
width: 50px;
height: 5px;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}
.caption-wrap .line-3:before {
margin: 7px 0 0 -60px;
}
.caption-wrap .line-3:after {
margin: 7px 0 0 10px;
}
幻灯片HTML标记:
<li>
<img src="images/mountains.jpg" class="parallax-bg" alt="">
<div class="overlay"></div>
<div class="container hidden-xs">
<div class="caption-wrap">
<p class="line-1">we are</p>
<h1 class="line-2 dashed-shadow">
MINIMAL</h1>
<h4 class="line-3">Design | Develpment | Success</h4>
<p class="line-5">
<a href="#">codenpixel</a>
<a href="#">retrograde</a>
</p>
<p class="line-6">2014</p>
</div>
</div>
</li>
在Chrome上看起来像这样:
This look like this, on Chrome:
和Internet Explorer:
And internet explorer:
在Internet Explorer开发人员工具上,所有这些CSS代码都是删除线,因此我认为 忽略了.有没有办法在Internet Explorer中使此CSS工作?
On internet explorer developers tools all this css code is strikethrough, so I suppose that is being ignored. Is there a way to make this css work in internet explorer?
网站链接.
推荐答案
对于伪元素,您不需要绝对定位.您可以在伪元素上使用display:inline-block;
获得所需的布局:
You don't need absolute positioning for the pseudo elements. You can achieve the desired layout with display:inline-block;
on pseudo elements :
DEMO
CSS:
.caption-wrap .line-3:before,
.caption-wrap .line-3:after {
content: " ";
display:inline-block;
width: 50px;
height: 5px;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
margin: 7px 10px 0;
}
已经在IE 11上进行了测试,但是可以在所有支持伪元素的版本中使用 (IE8 +)
Tested on IE 11 but this should work on all versions supporting pseudo elements (IE8 +)
这篇关于Internet Explorer上的:before和:after选择器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!