绝对位置问题:使用IE 11之前的伪元素<与所有其他浏览器对比

Question

请注意:使用单独的样式表或条件注释标记IE11或更少不是一个选项,因此我需要一个适用于所有浏览器的全局CSS解决方案.

我在标题元素上使用"before"伪元素来插入左双引号.它在Chrome,Firefox,Safari Mobile等中看起来很不错,但IE 11更低,大约高出30 px.

我已经尝试了我能想到的一切,我所做的一切都不会在所有浏览器中将双引号放在同一位置.

有谁知道修复？

这是我的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:

Answer 1

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

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

编辑:

该错误已经提交给IE团队,但尚未修复.看到这个.用户使用Modernizr回复解决方法.无法直接链接到变通方法,但引用如下:

lmeurs发表于07.04.2014 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类,可用于应用不同的样式