绝对位置问题：使用 IE 11< 的伪元素与所有其他浏览器相比答案

【问题标题】：Absolute Position Issue with :before pseudo element with IE 11< vs. all other browsers绝对位置问题：使用 IE 11< 的伪元素与所有其他浏览器相比
【发布时间】：2014-07-13 03:03:12
【问题描述】：

请注意：使用单独的样式表或条件 cmets 来标记 IE11 或更低版本不是一种选择，因此我需要一个适用于所有浏览器的全局 CSS 的解决方案。

我在标题元素上使用“before”伪元素来插入左双引号。它在 Chrome、Firefox、Safari Mobile 等中看起来不错，但在 IE 11 及以下版本中它大约高 30 px。

我已经尝试了所有我能想到的方法，但我所做的一切都不会在所有浏览器中将双引号放在同一个位置。

有人知道解决办法吗？

Here's my JSFiddle.

HTML：

<h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</h1>

CSS：

body {
    margin: 20px;
}
h1 {
    font-family: Arial, Helvetica, Sans-serif;
    font-weight: normal;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 20px;
    line-height: 1.25rem;
    position: relative;
    padding-left: 44px;
}
h1:before {
    font-weight: bold;
    font-size: 70px;
    font-size: 4.375rem;
    line-height: 50px;
    line-height: 3.125rem;
    position: absolute;
    top: 6px;
    left: -5px;
    content:"“";
}

铬：

IE 11：

【问题讨论】：

标签： css internet-explorer absolute internet-explorer-11 pseudo-element

【解决方案1】：

试试这个

在伪类（即 10 和 11）中使用相对字体大小和行高肯定存在问题。

我已经从伪类中删除了相对位置（因此默认情况下应该是静态的）以及我已重置为 0 的行高；

然后我使用垂直对齐来定位伪类。这应该会产生预期的效果。

h1:before {
font-weight: bold;
font-size: 70px;
font-size: 4.375rem;
line-height: 0;
margin-left: -2rem;
content:"“";
vertical-align: bottom;

}

http://jsfiddle.net/205bhkau/2

【讨论】：

【解决方案2】：

不确定使用 rems 是否对您的项目至关重要，但从 h1:before 中删除 line-height: 3.125rem; 将使其在 IE11 中呈现相同。

我听说 IE11 有一个错误，rems for line-height。我会看看能不能找到这个的来源。

编辑：

该错误已提交给 IE 团队，但尚未修复。 See this。用户回复了使用 Modernizr 的解决方法。无法直接链接到解决方法，但引用如下：

由 lmeurs 于 2014 年 4 月 7 日 04:59 发布

一种解决方法是将 Modernizr 与以下自定义测试一起使用，该测试使用以 rems 定义的行高来测试伪元素的高度。

// Based on https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/generatedcontent.js
Modernizr.testStyles('#modernizr{font:0/0 a}#modernizr:after{content:":)";visibility:hidden;font:7px/1 a; line-height: 5rem}', function( node ) {
    Modernizr.addTest('pseudoelementlineheightinrems', node.offsetHeight >= 10);
});

Modernizr 现在向 HTML 标签添加了一个“pseudoelementlineheightinrems”或“no-pseudoelementlineheightinrems”CSS 类，可用于应用不同的样式

【讨论】：

这是我忽略尝试的唯一项。问题解决了。谢谢！！