html - 基于 webkit 的浏览器中的字体对齐问题

Question

代码如下:

    <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 等中，副标题“on this page.com”垂直显示我想要的方式。

在 Chrome 和 Safari 等 Webkit 浏览器中，它被向下推了几个像素。概率是多少？谢谢。

Answer 1

line-height 和 padding-top 都会影响“TODAY”和强调文本之间的空间(至少从我的阅读方式来看，它显示在下方“今天”因为 display:block)。也许只使用 padding 或只使用 line-height 会在每个浏览器中以相同的方式显示它。