CSS-разграничение между FF / IE и Chrome - PullRequest
Новая
       41

CSS-разграничение между FF / IE и Chrome

2 голосов
/ 15 января 2012

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

http://nostalgia.mx/light2.html

Откройте сайт с помощью Firefox + ie и Chrome, и вы заметите глубокие различия:

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

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

OK. Итак, мой вопрос:

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

С уважением Sotkra

1 Ответ

4 голосов
/ 15 января 2012

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

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

Заголовок

со стилем

h1 {font-size: 150px;} h1 {border-bottom: твердый 0,05em;дисплей: встроенный блок;} h1 span {position: относительный;верх: 0.2em;}

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

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

...