CSS текст-подчеркивание разница между FF/IE и Chrome

Question

У меня вопрос. В следующем url у меня есть набор элементов h1, h2 и p с их соответствующим стилем css. Элемент h1 имеет подчеркивание текста.

http://nostalgia.mx/light2.html

Открыть сайт как с светлячками + т и хромом и вы заметите, глубокие различия:

1.- FireFox + т.е. сделать подчеркивание пропорционального FontSize элемента подчеркнут , что очень умно. Google держит его тонким и непропорциональным.

2.- firefox + ie 'fuse' или 'meld' сам текст с подчеркиванием, так что силуэт - это одна отдельная деталь, что очень приятно. Хром, с другой стороны, нет.

OK. Поэтому мой вопрос:

Возможно ли, чтобы Chrome выглядел как FF/IE?

С уважением Sotkra

Answer 1

явление можно наблюдать в простой обстановке, где вы просто элемент с большим размером шрифта и установить text-decoration: underline на нем. Браузеры реализуют это по-разному относительно ширины подчеркивания. Невозможно повлиять на это в CSS. Проект CSS3 Text не имеет ничего об этом, хотя у него есть свойства, влияющие на другие функции подчеркивания. В обсуждениях, a property for setting underline has been proposed.

Если вы хотите имитировать подчеркивание с помощью border-bottom, вы можете с некоторыми дополнительными осложнениями в разметке и CSS установить ширину (и цвет и положение). Пример:

Заголовок

со стилем

h1 {размер шрифта: 150px; } h1 {border-bottom: solid 0.05em; display: inline-block; } h1 span {position: relative; наверх: 0.2em; }

Демо: http://jsfiddle.net/yucca42/Qdeek/

При таком подходе вам нужно будет позаботиться о настройке заголовка на одной линии и с использованием соответствующих верхнего и нижнего полей (видимо, с настройками на другие элементы, может быть, обернув элемент внутри div), так как display: inline-block удаляет стандартный стиль рендеринга.