Т.е. vertical-align: super/sub неверно

Я хотел бы применить атрибут super/sub vertical alignment css для элемента span. После этого слова в пределах диапазона отображаются в правильном положении. Тем не менее, диапазон, который содержит эти слова, выглядит как помещенный в неправильное положение (базовое положение) под IE. Он отлично работает в других браузерах, кроме IE.

Что более интересно, я обнаруживаю, что если я присвою атрибуту contenteditable = "true" элементу span, его положение станет правильным (...).

Вы можете проверить это здесь (с атрибутом contenteditable = "true" верхняя позиция равна 0, а атрибут contenteditable = "true" - 7): http://jsfiddle.net/E5Af9/

Вы можете попытаться удалить contenteditable = "true" на первом синем поле, чтобы узнать, что произойдет. Он ведет себя так же, как то, что я сказал выше.

Я хочу иметь более безопасные варианты, которые добавляют неопределенный атрибут элемента span. У кого-нибудь есть идея? Или кто-нибудь может сказать мне, будут ли у меня побочные эффекты при использовании контентного диапазона.

1 ответ

Я не вижу проблемы с IE 9 даже в режиме IE 7. Я не уверен в том, что рассматривается как проблема, так как описание, похоже, говорит, что слова в пределах диапазона отображаются правильно, но диапазон не является, и я не вижу, что это может означать.

Во всяком случае, в vertical-align есть некоторые причуды в браузерах, и даже по спецификациям это может повлиять на высоту линии, что часто нежелательно. Поэтому часто лучше использовать относительное позиционирование. Например, вместо

vertical-align: 1ex;

вы можете установить

position: relative; bottom: 1ex;

Значения ключевых слов super и sub имеют значения, зависящие от реализации, и они часто типографически непригодны в дополнение к различным браузерам. Вертикальное размещение должно, как правило, зависеть от окружающих символов и шрифта, поэтому лучше спроектировать его самостоятельно, обычно используя блок em или ex unit, вместо этого просто указывая браузерам, чтобы применить их идею надстройки или подписки.

licensed under cc by-sa 3.0 with attribution.