Firefox 的默认字体大小问题

Question

我注意到 Firefox 下的默认字体大小选项（我不是在谈论高级选项卡下的最小字体大小）有一个奇怪的行为： 转到此页面http://fr-region.xb83studio.ch/2012/lachen/ 并设置默认字体大小为 44 像素或更高。有人可以解释为什么第二个列表低于第一个吗？ 里面的文本有一个指定的字体大小，因此它们不会被默认字体大小功能修改。

最初问题出现在默认字体大小为 17 像素或更高的情况下。我将宽度减少了 3 像素，现在它可以达到 40 像素。但我仍然不明白为什么会出现这个问题。非常感谢您的解释。

顺便说一句，我在 Windows 7 Professional SP1 下运行 Firefox 12.0

感谢您的想法

勒内

Answer 1

您有两个宽度为 207 像素、左边距为 32 像素的内联块元素。它们位于宽度为 488px 的容器中（573px 宽度的 div 包含一个具有自动宽度、55px 左边距和 30px 右边距的部分）。在您的标记中，第一个内联块的 </ul> 和第二个内联块的 <ul> 之间有空格，因此在渲染中它们之间有一个空格，就像任何两个由空格分隔的字符之间一样。该空格的宽度是容器字体中空格字符的宽度。

所以一旦488px-2*(207px+32px) = 10px 小于容器字体中空格字符的宽度，第二个列表就会在第一个列表之下。

如果您之前的内联块宽度为 210 像素，那么一旦空间的宽度超过 6 像素，就会发生换行；对于典型的可变宽度西方字体来说，大约 17 像素的字体大小听起来很合适。