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

问题描述

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

Is it possible to achieve line-height consistency in all browsers?

我附加了一个图像。你会注意到一个红色的矩形框和一个绿色的矩形框（两个相同的宽度和高度），我已经通过photoshop手动添加，以帮助显示虚线之间的空间/差距（红色框下方）和Followers：3197179text。

I have attached an image. You will notice a red rectangular box and a green rectangular box (both of the same width and height) which I have added via photoshop manually to aid in showing the the space/gap difference between the dotted lines (below the red box) and the "Followers: 3197179" text.

似乎Firefox是唯一一个以不同方式显示元素的。我注意到，当我应用行高。

It seems that Firefox is the only one that is displaying the elements differently. I notice this when I apply a line-height. Any way I can make this consistent with all browsers?

我使用的是Firefox 3.6.13，Safari 5.0.3，Opera 10.63和Chrome 8.0.552.231。

I am using Firefox 3.6.13, Safari 5.0.3, Opera 10.63 and Chrome 8.0.552.231.

CSS ：

CSS:

.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; }

b
$ b

HTML

<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>

推荐答案

也许你可以尝试更具体的尝试使用px在line-height和font-size。也尝试在这些文本中使用填充，也许它会工作，我想）。

Your currently using em's. Maybe you can try to be more specific by trying to use px in both line-height and font-size. Also try to use padding in those texts, maybe it'll work, I think ;).

在任何跨浏览器的事情。没有具体的方法来做，使每个渲染器都一样。它总是一个梦想，大多数客户不明白。对我来说，最好总是向他们解释他们想要什么，以及我们在像1px / 2px这样的差异中花费多少时间。这是普通的。您可以查看。

In any cross browser thing you do. There's is no concrete way of doing things to make it same on every renderer. It's always a dream that most client's don't understand. For me, it's better to always explain to them what they want and how much time we spend in things like 1px/2px differences. It's plain normal. You may check this video by Andy Clarke speaking about cross browser and some other cool stuff.

这篇关于是否可以在所有浏览器中实现行高一致性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！