Разница высот в 1 пиксель между Firefox и Chrome

Question

Работа над новым дизайном сайта в asp.net с мастер-страницами. Заголовок страницы - это панель меню высотой 35px, которая содержит элемент управления меню asp, представленный как неупорядоченный список.

Выбранный пункт меню оформлен с использованием разноцветного фона и 2-пиксельной рамки вокруг левой верхней и правой сторон. Нижняя часть выбранного элемента меню должна совпадать с нижней частью строки меню, чтобы выбранная «вкладка» выглядела так, как будто она перетекает в содержимое под ним. Хорошо выглядит в Firefox и IE, но в Chrome «вкладка» кажется на 1 пиксель выше нижней части строки меню.

Просто интересно, есть ли какая-то ошибка, о которой я не знаю.

Я понимаю, что вам, скорее всего, понадобится код, чтобы помочь с этой проблемой, поэтому я буду публиковать CSS как можно скорее.

EDIT:

вот CSS для меню ...

div.hideSkiplink
{     
    width:40%;
    float:right;
    height:35px;
}

div.menu
{
    padding: 0px 0px 0px 0px;
    display:inline;
}

div.menu ul
{
    list-style: none;
}

div.menu ul li
{
    margin:0px 4px 0px 0px;
}

div.menu ul li a, div.menu ul li a:visited
{
  color: #ffffff;
  display: block;
  margin-top:0px;
  line-height: 17px;
  padding: 1px 20px;
  text-decoration: none;
  white-space: nowrap;
}

div.menu ul li a:hover
{
  color: #ffffff;
  text-decoration: none;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: none;
  border-left: 1px solid #fff;
}




div.menu ul li a:active
{
 background:#ffffff !important;
 border-top:2px solid #a10000;
 border-right:2px solid #a10000;
 border-bottom: none;
 border-left:2px solid #a10000;
 color: #000000 !important;
 font-weight:bold;

}


div.menu ul a.selected
{
  color: #000000 !important;
  font-weight:bold;
}

div.menu ul li.selected
{
 background:#ffffff !important;
 border-top:2px solid #a10000;
 border-right:2px solid #a10000;
 border-bottom: none;
 border-left:2px solid #a10000;
}

div.menu ul li.selected a:hover
{
  border: none;
}

Выбранные классы добавляются в li и элементы через jquery ...

Вот скриншот проблемы ... Пример Chrome находится сверху, и вы можете увидеть 1px красной границы под вкладкой. Внизу изображение Firefox, где все выглядит хорошо.

EDIT:

Поэкспериментировав с этим, я обнаружил, что на самом деле это сам div "header", который увеличивается на 1px в chrome ... Это кажется мне очень странным.

Answer 1

Ни один из этих ответов не решает проблему.

Set:

line-height: 1;
padding-top: 2px;

Поскольку механизмы рендеринга webkit и mozilla по-разному реализуют высоту строки, не используйте ее для управления измерениями для отдельных позиций.

Для таких элементов, как меню, кнопки и особенно маленькие пузырьки уведомлений, сбросьте высоту строки до нормальной и используйте отступы или поля, чтобы они вели себя одинаково.

Вот JSFiddle, иллюстрирующий эту проблему: http://jsfiddle.net/mahalie/BSMZe/6/

Answer 2

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

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

Answer 3

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

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

Answer 4

Это распространенная проблема, с которой я сталкиваюсь на некоторых из моих сайтов ... когда IE имеет разницу в пикселях, я обычно могу просто добавить пиксель поля / отступа в моей таблице стилей IE. Но когда это Safari / FireFox / Chrome, я обычно просто живу с пикселем и делаю толпу FireFox счастливой (пока - пока Webkit не правит сетью!), Хотя это выглядит немного странно в противоположном браузере.

Однако вы также можете проверить значения высоты строки (или добавить значение, если его еще нет) в содержащем элементе ul или div. Повторив это, я получил одинаковые отступы в FireFox, Chrome и IE.

Answer 5

Я уже некоторое время борюсь с этой проблемой и почти разочаровался в пикселе. Однако это пришло ко мне в один из тех моментов eurika: если вы прекрасно выровняли вкладку в Chrome (что оставляет перекрытие в Firefox), установите высоту ul в высоту li (включая любой отступ), вы можете удалить нарушающие пиксели в Firefox, установив переполнение на скрытый на ул.

Надеюсь, это поможет кому-то там!

Answer 6

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

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

Answer 7

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

Answer 8

Вы также можете сделать разные CSS для Мозила:

-moz-height:2em;

можно также использовать:

@-moz-document url-prefix{
    // your css
}

Answer 9

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

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

Answer 10

Полагаю, это единственный способ, использовать разные стили для разных браузеров проблемных разделов

/* FOR MOZILLA */
@-moz-document url-prefix() { 
.selector {
 color:lime;
}
}
/* FOR CHROME */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
/* Safari and Chrome, if Chrome rule needed */
.container {
 margin-top:100px;
}
/* Safari 5+ ONLY */
::i-block-chrome, .container {
 margin-top:0px;
}``