Разница высот в 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

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

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

css:

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

li a{display:block;}

Answer 2

У меня была похожая проблема, и это было связано с использованием ems для размеров шрифта, полей и отступов.Браузеры округляли ems по-разному и вызывали периодические проблемы с размером не более 1 пикселя по всему сайту в зависимости от длины контента.Как только я изменил все на измерения в пикселях, мои проблемы исчезли.

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

Answer 3

Мне удалось решить эту проблему с помощью веб-шрифта, с которым я работал, установив следующее:

.some-class {
    display: inline-table;
    vertical-align: middle;
}

Конечно, это немного глупо, но делает свою работу.Это значит, что у вас будут целевые стили специально для Internet Explorer

Answer 4

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

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

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

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

Answer 5

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

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

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

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

Answer 6

Важно понимать, что веб-страницы всегда будут отображаться по-разному в разных браузерах. Достижение совершенства пикселей бесполезно, и в настоящее время я пытаюсь объяснить своим клиентам, какие затраты требуются для того, чтобы каждый браузер отображал сайт одинаково. Чаще всего они понимают, что IE6 и FF4 никогда не будут отображать какую-либо страницу одинаково. Мы должны стараться, чтобы наши клиенты понимали и воспринимали динамику Интернета.

Прогрессивное улучшение и постепенная деградация. Мир.