1 pixel line height difference between Firefox and Chrome

попробуйте использовать display: block с элементом a "например ...

<li><a href="">Link</a></li>

css:

li{line-height:20px;}/*example only*/

li a{display:block;}

если line-height используется для вертикального выравнивания текста в контейнере (чего не следует), то согласованное поведение во всех браузерах может быть реализовано следующим образом:

line-height: 75px
height: 75px
overflow: hidden

Я мог бы быть новичком в CSS, но я нашел ту же проблему в W3Cschools.com, в одном из их примеров.

http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav

этот пример о спрайтах изображений. В этом примере вы можете видеть, что в Chrome значок home и prev icon имеют разделительную линию 1px, чего нет в Firefox.

Кажется, что в Chrome количество пикселей на 1 пиксель отличается от числа в Firefox.

У меня была точно такая же проблема, оказалось, что в chrome было установлено увеличение 110%, и это нарушало меню. Я заметил это, когда запустил Chrome на другом компьютере, и он выглядел хорошо.

Я сталкивался с этой проблемой в отношении текста с прозрачным фоном.

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

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .your-class {
        line-height:20px;
    }
}

Фууу, хак! Я стараюсь избегать хаков CSS, но я просто не мог найти другой путь. Надеюсь, это кому-нибудь поможет.

Вот решение, которое я нашел в на этой странице :

   button::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

У меня была та же проблема с моими основными вкладками, отображавшими их в Chrome, они были высотой в один пиксель и оставляли уродливую щель между вкладками и белым фоном мэйнфрейма.

Я решил проблему, предоставив вкладке div верхнее поле с плавающим значением. Сначала пробовал margin-top: 0.1px, ничего, потом 0.2 и т. Д., Пока с верхним полем, равным 0,5, все отлично отображалось во всех основных браузерах.

У меня была такая же проблема, и я решил ее, явно установив высоту строки и размер шрифта в элементе <li>, который содержит элементы <a>, являющиеся ссылками на вкладки. Надеюсь, что это поможет кому-то в будущем.

(отредактированные ссылки html)