编辑/解决 找到我自己的答案。对于所有想知道的人，它是:
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
最佳答案
您的 Doctype 或缺少 Doctype 导致浏览器以 Quirks 模式呈现您的页面。在这种模式下，他们倾向于模拟旧浏览器的错误，而不是遵循标准。 Quirks 模式下浏览器之间存在许多不一致。
Internet Explorer 中的一个错误是它将 padding 放在元素的 width 内。 (new, draft, experimental) box-sizing 属性允许浏览器有意这样做。
您应该使用触发标准模式的 Doctype 以避免与标准代码不一致。
HTML 4.01 Strict 通常是现代文档的最佳选择。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
您还可以考虑 HTML 5 草案:
<!DOCTYPE HTML>
关于css - 为什么我的 CSS 内容框在 Firefox 和 Internet Explorer 中大小不同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10072273/