Проблемы с размером шрифта, сравнивающие хром и Firefox

Я создал сайт, и проблема в том, что хром-дисплей 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 нет другого выражения размера шрифта, источник можно просмотреть в опубликованной ссылке.

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

Ответы

Ответ 1

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

Ответ 2

Fwiw в этот день, я сам недавно узнал, что хорошая практика 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)

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

Ответ 3

<script>

     if(navigator.userAgent.indexOf("Chrome") != -1 ) 
    {
         var fontsize = "<style>body{font-size: 125%;}</style>";
    }
    else if(navigator.userAgent.indexOf("Opera") != -1 )
    {
         var fontsize = "<style>body{font-size: 100%;}</style>";
    }
    else if(navigator.userAgent.indexOf("Firefox") != -1 ) 
    {
         var fontsize = "<style>body{font-size: 100%;}</style>";
    }
    else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
    {
         var fontsize = "<style>body {font-size: 100%;}</style>";
    }  
    else 
    {
         var fontsize = "<style>body {font-size: 100%;}</style>";
    }
    </script>

<script>document.writeln(fontsize);</script>

Ответ 4

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

EDIT: просто перечитайте, и я вижу, что вы попытались установить высоту как пиксели уже. У вас нет подсказки, так как у меня нет Chrome для тестирования.: (

Ответ 5

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

Chrome 9.0: enter image description here

Firefox 4.0 beta 10: enter image description here

Ответ 6

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

Ответ 7

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

добавить 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;
}

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