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

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

27 голосов
/ 04 февраля 2011

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

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

Ответы [ 7 ]

15 голосов
/ 04 февраля 2011

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

9 голосов
/ 25 сентября 2012

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

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

7 голосов
/ 06 мая 2015 
<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>
2 голосов
/ 05 февраля 2011

Хорошо работает здесь:

Chrome 9.0: enter image description here

Firefox 4.0 beta 10: enter image description here

1 голос
/ 09 июля 2012

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

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

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

1 голос
/ 04 февраля 2011

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

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

0 голосов
/ 04 февраля 2012

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

...