Абсолютная позиция Проблема с: перед псевдоэлементом с IE 11 <против всех других браузеров

Обратите внимание: использование отдельной таблицы стилей или условных комментариев для флага IE11 или менее не является вариантом, поэтому мне нужно решение, которое будет работать в глобальном CSS для всех браузеров.

Я использую псевдо-элемент before перед элементом заголовка, чтобы вставить левую двойную кавычку. Он отлично выглядит в Chrome, Firefox, Safari Mobile и т.д., Но IE 11 и менее он примерно на 30 пикселей выше.

Я пробовал все, что мог, и ничего не сделаю, будет позиционировать двойную кавычку в одном месте во всех браузерах.

Кто-нибудь знает об исправлении?

Здесь мой 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:""";
}

Chrome:

enter image description here

IE 11:

enter image description here

Ответы

Ответ 1

Не уверен, что использование ретрансляции имеет решающее значение для вашего проекта, но удаление line-height: 3.125rem; из h1:before сделает его рендерингом в IE11.

Я слышал, что IE11 имеет ошибку с rems для line-height. Я посмотрю, могу ли я найти источник для этого.

Edit:

Ошибка была отправлена ​​в команду IE, но не была исправлена. См. это. Пользователь отвечает обходным путем с помощью Modernizr. Не удалось напрямую связать с обходным путем, но приведено ниже:

Отправлено lmeurs 07.04.2014 в 04:59

Обходной путь заключается в использовании Modernizr со следующим пользовательским тестом, который проверяет высоту псевдоэлемента с высотой строки, определенной в ремах.

// 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-тег CSS-класс "псевдоэлементная линия" или "no-pseudoelementlineheightinrems", который может использоваться для применения разных стилей.

Ответ 2

Попробуйте это

Есть определенные проблемы с использованием относительных размеров шрифтов и высот строк в псевдоклассах, т.е. 10 и 11.

Я удалил позицию по сравнению с псевдо-классом (поэтому должен быть статичным по умолчанию), а также высоту строки, в которой у меня есть reset до 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