是否有可能在所有浏览器中实现行高一致性？

Question

是否可以在所有浏览器中实现行高一致性？

我附上了一张图片。您会注意到我通过 Photoshop 手动添加的一个红色矩形框和一个绿色矩形框（宽度和高度都相同），以帮助显示虚线（红色框下方）和“关注者：3197179”文本。

似乎只有 Firefox 以不同方式显示元素。当我应用线高时，我注意到了这一点。有什么办法可以让所有浏览器都保持一致？

我正在使用 Firefox 3.6.13、Safari 5.0.3、Opera 10.63 和 Chrome 8.0.552.231。

.clearfix,
.container {
  display: block;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  position: relative;
  margin: 0 0 0 0;
  padding: 12px 0;
  border-bottom: 1px dotted #E7E7E7;
}

li img {
  float: left;
  margin-top: 0;
}

li p {
  margin: 0 0 0 58px;
  padding: 0;
  font-weight: normal;
  border: none;
  font-size: 1em;
  line-height: 1.3em;
}

li p.name {
  position: relative;
  padding-top: 0;
  font-size: 1.1em;
  font-weight: bold;
}

<ul>
  <li class="clearfix">
    <a href="#"><img width="50" src="http://localhost:3000/images/foobar.gif" alt="thumb"></a>
    <p class="name">
      <a href="#">Jessica Simpson</a>
    </p>
    <p>Blurred out text here</p>
    <p>Followers: 3197179</p>
  </li>
</ul>

Answer 1

您目前正在使用 em。也许您可以通过尝试在行高和字体大小中使用 px 来尝试更具体。也尝试在这些文本中使用填充，我认为它可能会起作用；）。

在你做的任何跨浏览器的事情中。没有具体的方法可以使每个渲染器都相同。这始终是大多数客户不理解的梦想。对我来说，最好总是向他们解释他们想要什么，以及我们在诸如 1px/2px 差异之类的事情上花了多少时间。这很正常。您可以查看this video by Andy Clarke speaking about cross browser and some other cool stuff。

Answer 2

您是否使用 CSS 重置？这些有助于缓解大多数跨浏览器问题。 Meyer Web 有一个受欢迎的：http://meyerweb.com/eric/tools/css/reset/

Answer 3

您只能为 Mozilla 添加line-height，方法是：

@-moz-document url-prefix() {
    *, body {
        line-height: [as per your requirement];
    }
}

Answer 4

您是否指定了任何通用规则？例如：

* {
    margin: 0;
    padding: 0;
}
body {
    font-size: 100%;
    line-height: 1;
}

有时它很有帮助，即使没有完整的 reset.css 方法。

Answer 5

这可能是字体的渲染方式。尝试将其用作字体系列。

font-family:"Arial Unicode MS","Lucida Sans Unicode";