css – Firefox不尊重行高

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

对不起,这将需要你做一些工作.请多多包涵.

>打开Firefox.您需要Firebug扩展或允许您运行单个JS命令的东西.
>去here.抱歉所有的动漫.
>打开Firebug控制台并运行以下命令:

CSSdev.enable_tiles()

>您现在正在查看基线网格.每个正方形是24×24像素.整个站点的线高为24px,没有例外.图像,边距,一切的大小是24px的倍数.
>向下滚动,直到您可以在侧栏中看到“蓬松标签云”.注意它下面的任何东西是错误的;它有点太低了.如果您在Firebug DOM树中导航到布局的该部分,并将鼠标光标悬停在< p>上元素,你将能够看到标签云的高度有点太大.

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

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

鉴于:

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

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

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

@Kobi:请重新添加你的答案,这样我才能接受

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

最佳答案 这很奇怪,我没有检查过,但看起来设置这个就是诀窍:

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

再一次,我只是在玩,但它似乎按照你想要的方式对齐页面.

另一种选择是让标签浮动:左边并且固定高度为24px.

点赞