Проблема выравнивания шрифтов в браузерах на основе webkit - PullRequest
Новая
       14

Проблема выравнивания шрифтов в браузерах на основе webkit

1 голос
/ 19 мая 2010

Вот код: 

    <style type="text/css">
  html, body {font:0.9em/1.2em arial, verdana, helvetica, sans-serif;}
  #todayOn {background-color:#efefef; repeat-x top left;border-bottom:1px solid #ddd;border-top:1px solid #ddd;height:52px;margin:15px 0;}
  #todayOn #pageTitle {float:left;padding-left:3px;}
  #todayOn #pageTitle h2 {color:#feb425;font-size:32px;margin:10px 0 0 0;padding:0;}
  #todayOn #pageTitle h2 em {color:#7498c0;display:block;font-size:14px;font-style:italic;font-weight:normal;line-height:20px;padding:5px 0 0 0;}
  </style>

 <div id="todayOn">
  <div id="pageTitle">
   <h2>TODAY <em>on this page.com</em></h2>
  </div>
 </div>

В Firefox, IE (6+), Opera и т. Д. Подзаголовок «на этой странице.com» отображается вертикально так, как я хочу.

В браузерах Webkit, таких как Chrome и Safari, он отталкивается еще на пару пикселей.В чем проблема?Спасибо.

1 Ответ

0 голосов
/ 19 мая 2010

И line-height, и padding-top будут влиять на пробел между "СЕГОДНЯ" и выделенным текстом (по крайней мере из того, как я его прочитал, он отображается под "СЕГОДНЯ" из-за display:block). Возможно, только использование отступов или только использование высоты строки будет отображать его одинаково во всех браузерах.

...