Проблемы с размером шрифта при сравнении Chrome и Firefox

Я создал сайт, и проблема в том, что дисплей Chrome font-size 1px больше, чем Firefox. Я попробовал несколько способов согласования размера шрифта, указал его в px, в % установил для тела значение 100%, а затем для элементов — 0.875em. Ни один из них не работает. Он по-прежнему отображает на 1 пиксель больше в хроме.

Это код, который я использую для размеров шрифта:

body {
  font-size: 100%;
}
* {
  margin:0;
  padding:0; 
  text-decoration: none; 
  font-family:helvetica, arial, sans-serif;
}
#geral {
  width:1000px; 
  margin:0 auto; 
  position:relative; 
  font-size:0.875em;
}

Если #geral охватывает весь сайт и в CSS нет другого указания размера шрифта, исходный код можно просмотреть по ссылке, которую я разместил.

Интересно, есть ли способ исправить это или мне придется указывать разные размеры шрифта для каждого браузера?


google-chrome css firefox font-size
person Iberê    schedule 04.02.2011    source источник

Ответы (6)


arrow_upward
15
arrow_downward

Я предлагаю вам использовать сброс CSS, как в YUI. Это сделает ваши страницы намного более согласованными во всех браузерах, включая отображение шрифтов. Это имеет большое значение для IE и других браузеров, но избавляет от всевозможных несоответствий.

person Surreal Dreams    schedule 04.02.2011
comment
Это очень важно. Все должны использовать это все время. - person Diodeus - James MacFarlane; 04.02.2011
comment
Это изменит твою жизнь, чувак. Например, найти FireBug, изучить jQuery или впервые попробовать начос. - person Surreal Dreams; 04.02.2011
comment
Это действительно полезно, но даже после добавления этого сброса CSS он по-прежнему отображается больше. Я думаю, что я пойду с php useragent, чтобы установить одинаковый размер шрифтов в каждом браузере. - person Iberê; 04.02.2011
comment
Прямой URL-адрес для сброса CSS: github.com /yui/yui2/blob/master/src/reset/css/reset.css (не уверен, почему этот ответ отмечен галочкой, когда комментарий OP заключается в том, что он не решает проблему!) - person Darren Cook; 11.11.2014
comment
Это необходимо, но не помогает в решении проблемы. - person Vincent Orback; 05.02.2015

arrow_upward
10
arrow_downward

Между прочим, на данный момент я сам только недавно узнал, что хорошей практикой кодирования CSS является определение абсолютного размера шрифта только для элемента HTML или BODY и определение всех других размеров шрифта относительно, то есть с точки зрения этого размера. (т. е. используя em или %).

Если вы это сделаете, вам нужно только выделить браузеры webkit (Chrome, Safari) из других (Gecko, IE и т. д.). Так, например, вы могли определить в своей таблице стилей,

body {
  font-size: 16px;
}

Затем в нижней части таблицы стилей вы можете включить это

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  Body {
    font-size: 20px;      
    }
}

(См. также условные комментарии Chrome)

Это работает для меня. Но одним побочным эффектом является также изменение масштаба любых нетекстовых элементов с относительным размером, и это может быть или не быть желательным.

person JohnK    schedule 25.09.2012

arrow_upward
2
arrow_downward

Отлично работает здесь:

Chrome 9.0: введите здесь описание изображения

Firefox 4.0 beta 10: введите здесь описание изображения

person Myles Gray    schedule 04.02.2011
comment
Да, я исправил это сейчас, я использовал js, чтобы обнаружить хром и компенсировать этот 1px. - person Iberê; 06.02.2011

arrow_upward
1
arrow_downward

em масштабируется, а px нет. Установите шрифт на определенный размер px, и все будет в порядке. em может быть желательным в определенных обстоятельствах, но если вас беспокоит 1 пиксель, вам следует установить строгие размеры в пикселях.

РЕДАКТИРОВАТЬ: Просто перечитайте, и я вижу, что вы уже пытались установить высоту в пикселях. Тогда понятия не имею, поскольку у меня здесь не установлен Chrome для тестирования. :(

person anothershrubery    schedule 04.02.2011

arrow_upward
1
arrow_downward

если у вас есть веб-страница для печати, то

добавить css

<link rel="stylesheet" type="text/css" href="report.css" media="print" />

в css-файле

body {
    padding: 3px;
    margin: 0.5px;
    background-position: center;
    color: #000000;
    background: #ffffff;
    font-family: Arial;
    font-size: 13pt;
}

это работает для меня

person Prasanna Kulkarni    schedule 09.07.2012

arrow_upward
0
arrow_downward

У меня тоже была эта проблема, и я решил, где это возможно, использовать размер шрифта: маленький (или x-маленький и т. Д.). Это дает вам базовый диапазон масштабируемых размеров шрифтов без необходимости искать кропотливый CSS или возиться с JS. Он работает с IE, FF и Chrome.

person aSystemOverload    schedule 03.02.2012