Css Firefox不考虑线条高度

Css Firefox不考虑线条高度,css,Css,这个问题也可能出现在其他浏览器中,我还没有检查 很抱歉,这将需要您做一些工作。请容忍我 打开Firefox。您需要Firebug扩展或者一些可以让您运行单个JS命令的东西 去吧。为所有的动画感到抱歉 打开Firebug控制台并运行以下命令: CSSdev.enable_tiles() 您现在看到的是基线网格。每个正方形为24x24像素。整个现场的线路高度为24px,没有例外。图像,边距,所有东西的大小都是24px的倍数 向下滚动,直到您可以在侧边栏中看到“Fluffy tag cloud”

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

很抱歉,这将需要您做一些工作。请容忍我

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

  • 去吧。为所有的动画感到抱歉

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

CSSdev.enable_tiles()

  • 您现在看到的是基线网格。每个正方形为24x24像素。整个现场的线路高度为24px,没有例外。图像,边距,所有东西的大小都是24px的倍数

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


更清楚地说:问题是包裹标记云的所有元素的元素的高度不是24px的倍数;事实上,它只是太大了几个像素

这很奇怪,因为只包含文本,而且它的行高是24px,所以它的高度应该是24px乘以它里面的文本行数,而不管里面任何东西的字体大小。这就是我对它的理解


鉴于:

  • 标记云不继承行高:24px规则
  • 云中任意跨度的字体大小为20px或更小
  • 解决问题的唯一方法似乎是给所有跨距赋予相同的字体大小(例如,给所有跨距赋予16px的字体大小有效)
是否有任何一种修复方法或fugly hack可以用于不同的字体大小24px的行高


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

@请重新添加你的答案,这样我就可以接受了



由于我现在已经解决了这个问题,上述步骤将不再有效。

这很奇怪,我没有对此进行检查,但设置此选项似乎可以实现以下目的:

.rank-1 {
   line-height: 1;
}
再说一次,我只是随便玩玩,但它似乎能按您想要的方式对齐页面


另一种选择是让标签
浮动:左
,固定高度为24px。

如果我理解正确:标签基线在主要内容文本下方几个像素?是这样吗?顺便说一句,对于一个清晰易懂的问题,你得到了+1。谢谢,我添加了一句话:“为了更清楚…”这不就是把跨距的行高设置为20px,也就是.rank-1跨距的字体大小吗?详细说明我的评论:如果这样做了,当更多的评论发布,标签更改时,它就会中断。好吧。是的。然而,即使我将字体大小设置为70px,它似乎也会减少一些余量。另一个技巧是让标签
float:left
有一个高度,但这可能太高了……正如我添加到问题中的一样,第一部分可能是错误的,但float:left提示确实为我指明了正确的方向。没有其他人给出了更正确的答案,所以你得到了蛋糕:)你的评论启发我为Chrome编写了一个小的用户脚本,它将接受问题图像转换成更小的灰色蛋糕,并将接受答案图像转换成这么多蛋糕++为你=)