Firefox不尊重行

2018-06-13 21:09:46

这个问题也可能出现在其他浏览器中，我还没有检查。

对不起，但这将需要您的一些工作量。请多多包涵。

打开Firefox。你需要Firebug扩展或者让你运行一个JS命令的东西。

到这里。对不起所有的动画。

打开Firebug控制台并运行以下命令：

CSSdev.enable_tiles()

您现在正在查看基线网格。每个正方形都是24x24像素。整个网站的行高都是24px，没有例外。图片，边距，一切的大小都是24px的倍数。

向下滚动，直到您可以在边栏中看到“蓬松标签云”。注意它下面的任何东西是错位的; 它有点太低了。如果您在Firebug DOM树中导航到布局的该部分，并使用鼠标光标悬停在<p>元素上，您将能够看到标签云的高度有点过大。

更清楚的是：问题在于包裹标签云的所有<span>元素的<p>元素的高度不是24px的倍数; 事实上，它只是几个像素太大。

这很奇怪，因为<p>只包含文本，其行高为24px，所以它的高度应该是24px乘以其内部文本的行数，而不管其内部的任何字体大小。无论如何，这是我的理解。

鉴于：

标签云确实继承了line-height：24px规则;

云内任何跨度的字体大小为20px或更少;

解决这个问题的唯一方法似乎是给所有跨度设置相同的字体大小（例如，给所有的字体大小设置为16px）

是否有任何修复或fugly hack我可以使用不同的字体大小和行高度24像素？

我不知道为什么Kobi删除了他的答案，但它实际上导致了我的问题的解决。一个解决方案是将它转换为一个列表，UL和LI，将LIs浮起并为它们设置一个24px和一个小边距的高度，以使它们保持水平分离。

@Kobi：请重新添加您的答案，以便我可以接受

由于我现在已经解决了这个问题，上述步骤将不再起作用。

这很奇怪，我没有检查，但它看起来像设置这个伎俩：

.rank-1 {
   line-height: 1;
}

再次，我只是在玩耍，但它似乎按照你想要的方式对齐页面。

另一种选择是让标签float:left并具有24px的固定高度。

链接地址: http://www.djcxy.com/p/39551.html