Различное заполнение в Firefox и Safari
Я столкнулся со странно непоследовательным рендерингом между Webkit и Gecko.
Сафари
Fire Fox
Рассматриваемый фрагмент - это просто тег <li> с его текстовым содержимым, центрированным на цветном фоне:
<ul class = "tags">
<li>some tag</li>
</ul>
И форматирование:
ul.tags li {
font-family: Helvetica, Arial;
display: inline-block;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
background-color: #806d66;
color: white;
border-radius: 0.3em;
padding: 5px 6px 3px;
}
В отчаянии я уже поменял все соответствующие блоки с em на px и удалил вещи, связанные с высотой строки. Что мне не хватает? Спасибо вам за ваши предложения!
Jsfiddle: http://jsfiddle.net/19wsn4y7/13/
@TemaniAfif: Спасибо. Я изменил пример с «без засечек» на «Helvetica, Arial», чтобы исключить этот вариант.
Ответы 2
Проблема, похоже, связана с конкретным шрифтом. Хотя моя локально установленная версия Arial постоянно отображается во всех браузерных движках, размеры Helvetica кажутся немного неправильными:
Сафари
Fire Fox
Я все еще не понимаю, что происходит, но я смогу избежать таких проблем, используя веб-шрифты. Тем не менее, я все еще благодарен за любые дальнейшие идеи!
Минимальный пример на http://jsfiddle.net/19wsn4y7/26/
HTML:
<ul>
<li>HELVETICA</li>
<li>ARIAL</li>
</ul>
CSS:
li {
font-family:Arial;
display: inline-block;
font-size: 14px;
line-height: 20px;
font-weight: bold;
background-color: black;
color: white;
}
li:first-child {
font-family: Helvetica;
}
Вы получили объяснение веб-шрифты: в отличие от стандартных, они являются одним и тем же кросс-браузером, потому что их поведение определяется созданным шрифтом, а шрифт по умолчанию определяется браузерами.
Я рекомендую вам найти Normalize.css, который нормализует (синхронизирует) пользовательский CSS независимо от типа браузера.
Это поможет вам добиться кроссбраузерности при рендеринге ваших элементов.
Я считаю, что проблема не связана с нормализацией CSS: размеры, связанные с CSS, одинаковы во всех браузерах, но рендеринг шрифтов отличается. Следовательно, вставка Normalize.css не решает мою проблему: jsfiddle.net/19wsn4y7/28
когда дело доходит до семейства шрифтов, это как-то ожидается ... вероятно, без засечек в обоих браузерах не обрабатываются одинаково