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

【问题标题】：Font alignment problem in webkit based browsers基于 webkit 的浏览器中的字体对齐问题
【发布时间】：2010-05-19 05:46:12
【问题描述】：

代码如下：

    <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 浏览器中，它被向下推了几个像素。问题是什么？谢谢。

【问题讨论】：

您使用的是重置样式表吗？您是否将 h2 上的填充和边距重置为 0？
是的，正在使用重置

标签： html css webkit font-size

【解决方案1】：

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

【讨论】：