0

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

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示例

4

3 回答 3

1

您的 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>
于 2012-04-09T11:15:08.340 回答
0

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

于 2012-04-09T14:52:49.863 回答
0

你看到哪个版本的 ie 有什么不同。我正在用 ie9 尝试这个，它们对我来说是一样的。我把它放在 fiddle 中以查看myfiddle。

试着阅读这篇文章，看看这是否解释了你所看到的。
http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

于 2012-04-09T11:13:26.933 回答