Работа с заполнением текста с Safari / Chrome/FF

Я пытаюсь понять, как у меня разные дополнения на всех браузерах.
Вот скриншот Для Safari Chromeи 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;
}

Меню в Safari, Chrome и Firefox

Результат:

  • на Safari: 2px 3px 5px 2px
  • на Chrome: 4px 1px 2px 1px
  • в Firefox: 5px 2px 1px 2px

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

2 ответа

  1. Добавьте CSS3 box sizing to nav ul li a. Попробуйте это надеюсь, что это исправит проблему.

    nav ul li a {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    }
    
  2. Это происходит из-за Таблицы Стилей агента пользователя. Добавить установите заполнение, которое вы хотите с CSS, но не забудьте добавить !важно! Так что это должно выглядеть примерно так:

    nav ul li a{
    положение: относительное;
    прокладка: 2px !важный;
    дисплей: встроенный блок;
    фон-Цвет: Красный;
    высота линии: 1;
    }