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

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

http://nostalgia.mx/light2.html

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

1.- Firefox + т.е. сделать подчеркивание пропорциональным размеру шрифта подчеркиваемого элемента, что очень умно. Google делает его тонким и непропорциональным.

2.- firefox+т.е. «объединить» или «объединить» сам текст с подчеркиванием, чтобы силуэт был единым целым, что очень приятно. Chrome, с другой стороны, нет.

ХОРОШО. Итак, мой вопрос:

Можно ли сделать Chrome похожим на FF/IE?

С уважением Соткра


google-chrome css firefox typography text-decorations
person Capagris    schedule 14.01.2012    source источник

Ответы (1)


arrow_upward
4
arrow_downward

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

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

Заголовок

со стилем

h1 {размер шрифта: 150 пикселей; } h1 { нижняя граница: сплошная 0,05 em; отображение: встроенный блок; } h1 span { позиция: относительная; верх: 0,2 см; }

Демонстрация: http://jsfiddle.net/yucca42/Qdeek/

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

person Jukka K. Korpela    schedule 14.01.2012
comment
Да, более глубокий поиск не показывает текущей поддержки настройки параметров подчеркивания. Но то, что я видел ранее, продолжает меня ошеломлять. Возможно, это было что-то совсем другое, и плохая память заставляет думать, что это связано с этим. В любом случае мне придется воспроизвести эффект с помощью границ, как я и опасался изначально. Спасибо хоть. - person Capagris; 15.01.2012