Баг в IE при использовании капители

[PavelTkachev]

Мне нужно сверстать ссылку вот такого вида:

 

http://jsfiddle.net/h58gq1kr/2/

 

Если удалить точку перед словом «сам», то оно становится на одну линию с «летает». При наличие точки в IE «.сам» ниже на 1 пиксел. Можно ли решить эту проблему иначе, чем созданием отдельного стиля для IE с другим значением line-height?

[PavelTkachev]

Важное замечание: «.сам» должен быть именно внутри css

[PavelTkachev]

Наверное, надо было написать в «Проблемы верстки»

[Great Rash]

Зачем у псевдоэлемента position: absolute; стоит?

[PavelTkachev]

Зачем у псевдоэлемента position: absolute; стоит?

 

Чтобы «.сам» выпирал справа от «летает» и при этом, чтобы «летает» было точно по правому краю «самолёт»

[Great Rash]

Почему тогда родителю псевдоэлемента не задано позиционирование? Ведь иначе слово "сам" будет позиционироваться относительно <a>, а не <span>.

Почему не заданы значения top и left для псевдоэлемента? Браузер в таком случае может вообще как угодно расположить его.

[PavelTkachev]

Почему тогда родителю псевдоэлемента не задано позиционирование? Ведь иначе слово "сам" будет позиционироваться относительно <a>, а не <span>.

Я сделал position:relative; Это не меняет никак результат.

Почему не заданы значения top и left для псевдоэлемента? Браузер в таком случае может вообще как угодно расположить его.

Разве по умолчанию нет значения общего для всех?

[Great Rash]

Нет. По умолчанию элемент будет находится так где он находился бы будь у него position: static; (точнее там будет находиться его левый верхний угол). Что будет происходить с динамически созданным элементом вроде after я не совсем понимаю. Возможно этого не понимает и ИЕ.

 

В целом я рекомендую задать для <span> position: relative;, а для ::after - top: 0; left: 100%; и посмотреть что получится.

[PavelTkachev]

http://jsfiddle.net/h58gq1kr/5/

 

Получится абсолютно то же самое.

 

По прежнему, если точку удалить, то всё исправляется. Наличие точки смещает в IE надпись на 1 пиксел вниз.

[Great Rash]

http://clip.corp.mail.ru/clip/m0/1422445601-clip-7kb-lMMFIskfRH44.png

[PavelTkachev]

Сделайте font-size:72px; для тега a. И всё увидите.

Edited January 28, 2015 by PavelTkachev