Различные отступы в Firefox и Safari

Question

Я сталкиваюсь со странно непоследовательным рендерингом между Webkit и Gecko.

Safari

Firefox

Данный фрагмент кода представляет собой просто тег <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/

Answer 1

Я рекомендую вам поискать Normalize.css , который нормализует (синхронизирует) пользовательские CSS независимо от типа браузера.

Это поможет вам добиться согласованности между браузерами при отображении ваших элементов.

Answer 2

Кажется, проблема связана со шрифтом. В то время как моя локально установленная версия Arial отображается в разных браузерах, размеры Helvetica выглядят немного не так:

Safari

Firefox

Я до сих пор не понимаю, что происходит, но я смогу избежать таких проблем с помощью веб-шрифтов.
Тем не менее, я все еще благодарен за любые дальнейшие идеи!

---

Минимальный пример на 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;
}