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

Ответ 1

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

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

Ответ 2

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

Set:

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

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

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

Здесь JSFiddle иллюстрирует эту проблему: http://jsfiddle.net/mahalie/BSMZe/6/

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

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

Ответ 9

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

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

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

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

Ответ 10

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

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

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

Ответ 11

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

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

Ответ 12

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

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

CSS

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

li a{display:block;}

Ответ 13

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

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

Ответ 14

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

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

Ответ 15

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

-moz-height:2em;

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

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

Ответ 16

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

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

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

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