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

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 差异等问题上花费了多少时间。这很正常。您可以观看Andy Clarke 讲述跨浏览器和其他一些很酷的东西的视频。