Internet Explorer 上的 :before 和 :after 选择器

Posted 2023-03-06

【中文标题】Internet Explorer 上的 :before 和 :after 选择器

【英文标题】：:before and :after selectors on internet explorer

【发布时间】：2015-01-04 06:26:22

【问题描述】：

我有一些使用 :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" >
    <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 上看起来像这样：

和 Internet Explorer：

在 Internet Explorer 开发人员工具上，所有这些 CSS 代码都是删除线，所以我想这是 忽略。有没有办法让这个 css 在 Internet Explorer 中工作？

网站link。

【问题讨论】：

不改变 HTML。您需要在 .caption-wrap

的任一侧放置一个元素

哪个版本的IE？我们可以看到你的标记吗？

我在所有最新版本的 IE 8、9、10 和 11 中都有这个问题

没有标记，重现问题的示例，很难找到解决问题的解决方案。您是否使用一些代码检查工具检查了页面？两个伪元素是否都显示在 IE 中的同一位置？

你是不是故意拼错了development？

【参考方案1】：

伪元素不需要绝对定位。您可以在伪元素上使用display:inline-block; 实现所需的布局：

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 上测试，但这应该适用于 all versions supporting pseudo elements (IE8 +)