我有一些使用 :before 和 :after 选择器的 css 代码:
.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>
This look like this, on Chrome:
And internet explorer:
在 Internet Explorer 开发人员工具上,所有这些 css 代码都带有删除线,所以我认为这是
被忽略。有没有办法让这个CSS在Internet Explorer中工作?
Website link http://themescreators.com/t-one/.
您不需要伪元素的绝对定位。您可以通过以下方式实现所需的布局display:inline-block;
关于伪元素:
DEMO http://jsfiddle.net/webtiki/wxngm6vr/1/
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 上测试过,但这应该可以工作所有版本都支持伪元素 http://caniuse.com/#feat=css-gencontent (IE8 +)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)