Сделка с отступом по тексту с Safari/Chrome/FF

Question

Я пытаюсь понять, как у меня разное заполнение во всем браузере. Вот скриншот для SafariChrome и Firefox с точно такой же код:

nav{ 
    position:relative; 
    text-align:right; 
    float:right; 
    text-transform:uppercase; 
} 
nav ul li{ 
    position:relative; 
    margin-bottom:.4em; 
    } 
nav ul li a{ 
    position:relative; 
    padding:2px; 
    display:inline-block; 
    background:red; 
    line-height:1; 
} 
nav ul li a:hover{ 
    color:#e0e0e0; 
} 

Результат:

• на сафари: 2px 3px 5px 2px
• на Chrome: 4px 1px 2px 1px
• на Firefox: 5px 2px 1px 2px

Есть решение для этого?

Answer 1

Добавить размер рамки css3 до nav ul li a. Попытайтесь это надеяться, что это исправит проблему.

nav ul li a { 
-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box; 
} 

Answer 2

Это из-за Таблицы User Agent. Добавьте задание, которое вы хотите использовать с помощью CSS, но не забудьте добавить! Important! Поэтому он должен выглядеть примерно так: nav ul li a { позиция: относительная; обивка: 2px! Important; дисплей: встроенный блок; background-color: red; line-height: 1; } }