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

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

您是否指定了任何通用规则？ e.g：

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

即使没有完整的reset.css方法，有时也会有所帮助。

Answer 4

您只能使用以下内容为Mozilla添加line-height：

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

Answer 5

可能是字体的呈现方式。尝试将其用作字体系列。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;