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

时间:2010-05-18 20:29:46

标签: html css webkit font-size

以下是代码:

    <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等中,“此page.com上的子标题”垂直显示我想要的内容。

在像Chrome和Safari这样的Webkit浏览器中,它被推下了几个像素。什么是概率?感谢。

1 个答案:

答案 0 :(得分:0)

“{1}}和line-height都会影响”TODAY“和强调文本之间的空间(至少从我的阅读方式来看,它会显示在”TODAY“下面,因为padding-top )。也许只使用填充或仅使用行高将在每个浏览器中以相同的方式显示它。