：在元素错位之前答案

【问题标题】：:before element misplaced：在元素错位之前
【发布时间】：2013-06-28 19:30:14
【问题描述】：

我不明白为什么它不能在 IE9 和 IE10 上运行。它适用于其他浏览器，但不适用于那些浏览器。这是我的问题：

_{（来源：d.pr）}

.briefing h3 {
    margin-bottom: 23px;
    border-bottom: 3px double #9f9c9b;
    position: relative;
    padding-bottom: 22px;
    padding-left: 40px;
}

.briefing h3:before {
    content: url('../img/general-title-decoration-white.svg?1370978950');
    width: 25px;
    display: block;
    top: 2px;
    left: 0;
    position: absolute;
}

我也在主页上使用这种技术来装饰字幕。除了它有效：

_{（来源：d.pr）}

使用此代码：

.special-title {
    font-size: 24px;
    color: #a4a19e;
    line-height: 1.2;
    position: relative;
    padding: 8px 0 8px 38px;
    border-top: 1px solid #e2dbcf;
    border-bottom: 1px solid #e2dbcf;
    margin-top: 49px;
    margin-bottom: 25px;
}

.special-title:before {
    content: url('../img/general-title-decoration.svg?1369571463');
    position: absolute;
    width: 28px;
    height: 28px;
    left: 0;
    top: 10px;
}

我试图查看差异，但我不明白。

另外，伪元素不会出现在我的 IE 控制台上，所以测试起来有点困难（尤其是使用 browserstack）。

有什么想法吗？我被困在那里了。

Here is the page where the problem appears

And the page where it doesn't

非常感谢。 :)

【问题讨论】：

顺便说一句，我看到你在找实习，我的公司（布鲁塞尔）经常招收实习生：www.mccann.be ;-)
@Bartdude 在 stackoverflow 上的舞台报价？不确定这是展示我技能的最佳场所啊哈，但谢谢！我会看看这个:)
寻求帮助并没有表现出弱点，特别是如果问题问得好。我会更担心那些假装他们从学校就知道一切或无法自己表现出任何反思迹象的人。
@Bartdude 好吧，你完全正确。非常感谢您的提醒！

标签： html css cross-browser cross-platform

【解决方案1】：

您是否尝试过不定位 :before 元素 absolute？只要你不定义display:block;

，它应该没有它就可以定位

另外，这两种情况的区别在于你在第一种情况下设置了display:block;。

【讨论】：

它是 svg，其代码中的大小设置为 100%，所以如果我不设置 display:block，它会占用整个容器。是的，刚注意到！我要试试没有。谢谢:)
糟糕，没有看到它是 SVG。祝你好运，让我知道结果。
好吧，我试图删除 display: 块，但没有任何改变。我不明白问题出在哪里..
如果你定义一个高度会发生什么？
您可以尝试通过 jsfiddle 重新创建场景吗？这样，您可以隔离问题，并且其他人可以更轻松地进行测试，因为 IE 中的开发人员工具不太好......

【解决方案2】：

我无法对此进行测试，但请尝试使用 ::before，这显然是 CSS3 中的新功能。

【讨论】：