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

Question

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

Выбранный пункт меню отличается разноцветным фоном и границей 2px вокруг левой и правой сторон. Нижняя часть выбранного пункта меню должна совпадать с нижней частью строки меню, чтобы выбранная «вкладка» выглядела так, как будто она втекает в содержимое ниже. Выглядит отлично в 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; 
} 

выбранных классов добавляются к Ли и через элементы с помощью JQuery ...

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

EDIT:

После игры вокруг с этим немного больше, я обнаружил, что это на самом деле «заголовок» Див себя, который растет на 1px в хроме ... Это кажется очень странный для меня.

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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

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

Похоже, что в Chrome количество пикселей составляет 1 пиксель, отличное от того, что принадлежит Firefox.

Answer 6

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

Set:

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

Поскольку WebKit & Mozilla рендеринга двигателей реализовать межстрочные иначе не использовать этого манипулировать измерения для элементов одной линии.

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

Вот JSFiddle иллюстрирующего этот вопрос: http://jsfiddle.net/mahalie/BSMZe/6/

Answer 7

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

Answer 8

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

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

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

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

Answer 9

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

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

Answer 10

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

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

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

Answer 11

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

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

Answer 12

попробуйте использовать дисплей: блок с элементом» например ...

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

CSS:

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

li a{display:block;} 

Answer 13

Вот решение, которое я нашел в this page:

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

Answer 14

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

/* 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; 
}`` 

Answer 15

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

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

Answer 16

вы также можете сделать разные CSS для Mozila:

-moz-height:2em; 

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

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