Firefox使用填充添加额外的宽度

Question

我对Firefox中的CSS有疑问。

如果我设置一个浮动div的宽度 - 让我们说200px - 将填充左侧设置为10px将在Firefox中将这些额外的10px添加到宽度。 在IE中并非如此。

您可以做些什么来阻止Firefox为div添加额外的宽度？

Answer 1

这不是firefox的问题，它是IE。

IE不符合标准，有一些技巧，但它们都是痛苦的屁股： http ： //en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

最简单的方法是包含有效的严格doctype标记：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

然后只需重写符合标准的盒子模型的css

这里有更多的doctypes

Answer 2

默认情况下，box-sizing设置为IE中的mozilla和border-box中的content-box。

通过使用：

-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;

在你的风格中你也可以将mozilla，safari和opera的盒子大小设置为边框。

有关更多信息，请访问： http ： //www.css3.info/preview/box-sizing/