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

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 .