Question

编辑/已解决找到我自己的答案。对于每个想知道的人来说，都是：

DIV{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}

我有以下CSS代码，我认为它非常“正常”，因此我应该平等地解释所有浏览器。问题是在Firefox中，该框比Internet Explorer宽约20个像素。原因是什么？我怎样才能让他们同样宽阔？

这是CSS代码：

<style type="text/css">
.commentbox{
background-color: #ffffff;
width: 200px;

border-top-color: #D1D1D1;
border-top-style: solid;
border-top-width: 1px;

border-bottom-color: #D1D1D1;
border-bottom-style: solid;
border-bottom-width: 1px;        

border-left-color: #D1D1D1;
border-left-style: solid;
border-left-width: 1px;

border-right-color: #D1D1D1;
border-right-style: solid;
border-right-width: 1px;    


box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.09);
padding-bottom: 9px;
padding-left: 9px;
padding-right: 9px;
padding-top: 9px;

position:relative;
display:block;
}

.title{
padding-top: 5px;
padding-bottom: 5px;
font-family: Verdana;
font-size: 12px;
}

.count{
text-align:right;
}
</style>

HTML代码：

<body bgcolor="#f3f3f3">
<div class="commentbox">
<div class="title">some long long long text that might take up two lines</div>
<div class="count">123</div>
</div>

这是jsfiddle example

Answer 1

您的文档类型或缺少文档类型会导致浏览器以怪异模式呈现您的网页。在这种模式下，他们喜欢模仿古代浏览器的错误，而不是遵循标准。 Quirks模式下浏览器之间存在许多不一致。

Internet Explorer中的一个错误是它将padding放在元素的width内。（新的，草稿，实验性的）box-sizing属性允许浏览器有意识地执行此操作。

您应该使用触发标准模式的Doctype来避免与标准代码不一致。

HTML 4.01严格通常是现代文档的最佳选择。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

您可能还会考虑草案HTML 5：

<!DOCTYPE HTML>

Answer 2

你看哪个版本的ie有什么不同之处。我用ie9尝试这个，对我来说它们是一样的。我把它放在小提琴里看myfiddle。

尝试阅读本文，看看这是否能解释您所看到的内容 http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Answer 3

如果是CSS3，请尝试使用box-sizing: content-box | border-box | inherit http://htmlbook.ru/css/box-sizing

为什么我的CSS内容框在firefox和Internet Explorer中有不同的大小？

3 个答案: