Question

firefox中似乎有一个错误，如果我在容器的右边缘放置任何东西（使用text-align或float），它会使容器变得比它应该的大。

所以例如 -

<div style='width:100px; overflow:auto'>
    <div style='width:50px; float:left;'>Something</div>

    <div style='width:50px; float:right;'>
        <h1 style='text-align:right;'>Title</h1>
    </div>
</div>

在firefox中创建一个滚动条，似乎在chrome中工作正常。有什么想法吗？

Answer 1

您所看到的是文本实际上溢出了容器，因为文本的绘制尺寸可能比其布局尺寸更大。这在斜体文本中尤为明显，但可以在任何文本中出现，尤其是子像素布局和抗锯齿。

Chrome不会执行任何类型的子像素布局，因此它只是忽略了溢出的文本。

您最简单的选择是将您的右浮动样式设为overflow:hidden。

Answer 2

当我与对象进行对齐时

<div style='width:100px; overflow:auto'>
<div style='width:50px; float:left;'>Something</div>

<div style='width:49px; float:right;'>
    <h1 style='text-align:right;'>Title</h1>
</div>

这个概率不会帮助你，但是当我使用％'s

时我必须这么做

Answer 3

很抱歉重新阅读您的问题，您可以删除滚动条，如下所示：

<div style='width:100px; overflow:hidden'>
    <div style='width:50px; float:left;'>Something</div>

    <div style='width:50px; float:right;'>
        <h1 style='text-align:right;'>Title</h1>
    </div>
</div>

你将丢失1px的内容

Answer 4

它的行为应该如此。您没有说明您使用的是哪个版本的Firefox和Chrome，但对于使用FF 9.0和Chrome 16的版本，它们的行为相同，即出现滚动条。这是因为您的内容超出了定义的宽度，溢出的默认值是“可见的”，因此右浮动div中的h1超出了div的边界。如果您将h1更改为p标签，则会注意到滚动条消失。

应用边框将说明框模型发生了什么（复制/粘贴以查看内容如何超出边框）：

<div style='width:104px; overflow:auto;'>
    <div style='width:50px; float:left; border:1px solid red;'>Something</div>

    <div style='width:50px; float:right; border:1px solid red;'>
        <h1 style='text-align:right;'>Title</h1>
    </div>
</div>

所以，再一次，它的表现应该如此。如果您的内容超出其容器的宽度并且未分配溢出值，则溢出默认为可见，并且内容显示并“推”容器的边界。在这种情况下，由于您的外部容器有溢出：auto，您会看到一个滚动条。

Firefox溢出右边缘？

4 个答案: