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

Question

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

我附上了一张图片。您会注意到一个红色的矩形框和一个绿色的矩形框（宽度和高度相同），我手动通过Photoshop添加，以显示虚线之间的空隙差异（在红框下面）和“Followers：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>

- Christian Fazzini

---

我知道差异可能只有一到两个像素。但这是客户的要求和“必须”。这样的事情是否可能做到，或者我应该向客户解释浏览器之间的1-2像素差异是不可能实现的？ - Christian Fazzini

http://dowebsitesneedtolookexactlythesameineverybrowser.com/ - Flack

嗨Flack，有些事情我可以轻松地实现，而且不需要使用“css hack”来使可视化在所有浏览器中看起来相同。然而，我想知道我最初发布的情况是否属于“不可能”的范畴。 - Christian Fazzini

即使在最坏的情况下，你总是可以想出一些“聪明”的黑客方式。但我不认为这值得努力。虽然我不是大师，但有人可能会提供清晰且可行的解决方案。 - Flack

Answer 1

你目前正在使用em。也许你可以尝试在行高和字体大小中使用像素px来更具体地设置。同时，尝试在这些文本中使用填充，也许会有所改善，我想是这样的;)

在任何跨浏览器的事情上，没有一种确切的方法可以使其在每个渲染器上都相同。这通常是大多数客户不理解的梦想。对我来说，最好总是向他们解释他们想要什么以及我们花费多少时间在1px/2px差异之类的事情上。这很正常。您可以查看Andy Clarke的 这个视频，其中讲述了跨浏览器和其他一些很酷的内容。

- Mon Noval

---

嗨，Ragingmon，我尝试使用像素代替。结果更糟糕了。这意味着有更多的空间/间隙。有趣的视频 :-) 谢谢你指出这一点。 - Christian Fazzini

没问题，伙计。目前有什么解决方案吗？:D - Mon Noval

我基本上已经解释过了。在所有的网络浏览器上实现完美是不可能的 :-) - Christian Fazzini

Answer 2

您可以在 Mozilla 中使用以下代码添加 line-height：

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

- Akshay Gurav

---

这种方法似乎不再被Mozilla支持。https://developer.mozilla.org/zh-CN/docs/Web/CSS/@document - 2540625

Answer 3

你有指定任何常规规则吗？例如：

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

有时候，即使没有完整的reset.css方法，这也是有帮助的。

- Flack

---

是的，我也已经设置好了。但我仍然能够看到与初始帖子中屏幕截图显示的相差1-2像素的间隙。 - Christian Fazzini

我在另一个环境中发现了这个有用的东西。感谢分享！ - kevincoleman

Answer 4

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

- Babak Naffas

---

嗨，Babak，是的，目前正在使用包括reset.css的Blueprint，并已加载。 - Christian Fazzini

Answer 5

可能是字体渲染的问题。尝试使用这个字体族。

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

- Aaron Lawrence