Firefox不尊重行高

时间:2009-11-24 08:51:48

标签: css

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

很抱歉,这将需要你做一些工作。请耐心等待。

  • 打开Firefox。您需要Firebug扩展或可以让您运行单个JS命令的东西。

  • 转到here。抱歉所有的动漫。

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

CSSdev.enable_tiles()

  • 您现在正在查看基线网格。每个正方形是24x24像素。整个站点的线高为24px,没有例外。图像,边距,所有内容的大小都是24px的倍数。

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


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

这很奇怪,因为< p>仅包含文本,其行高为24px,因此其高度应为24px乘以其中的文本行数,而不管其中的任何内容的字体大小。无论如何,这就是我的理解。


鉴于:

  • 标签云确实继承了 line-height:24px 规则;
  • 云内任何跨度的字体大小为20px或更小;
  • 解决问题的唯一方法似乎是为所有跨度提供相同的字体大小(例如,为所有内容提供16px字体大小的作品)

是否有任何类型的修复或虚假黑客我可以使用不同的字体大小行高为24px?


我不知道为什么Kobi删除了他的答案,但它实际上导致了我的问题。一个解决方案是将其转换为列表,其中包含UL和LI,向左浮动LI并为它们设置24px的高度和小的边距以使它们水平分开。

@Kobi:请重新添加你的答案,以便我接受


由于我现在已经解决了问题,因此上述步骤将不再适用。

1 个答案:

答案 0 :(得分:2)

这很奇怪,我没有检查过,但看起来设置这就行了:

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

同样,我只是在玩耍,但它似乎按照你想要的方式对齐页面。

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