Question

我在firefox上遇到了一个问题，而所有的IE，Safari和Chrome都在运行。

<div class="forDiv">ddd</div>
<table class="forTable"> .... </table>


.forDiv {
width:100%;
border:3px solid #236FBD;
background-color: #236FBD;
}

.forTable{
width:100%;
border:3px solid #236FBD;
background-color: #236FBD;
}

在Firefox中，div有点小。我该如何解决？

Answer 1

.forDiv {
width:100%;
border:3px solid #236FBD;
background-color: #236FBD;
-moz-box-sizing: border-box;
}

.forTable{
width:100%;
border:3px solid #236FBD;
background-color: #236FBD;
-moz-box-sizing: border-box;
}

Answer 2

不同浏览器如何处理宽度属性是不一致的 - 它们是否包含宽度中的边框/填充尺寸，或者它们是否认为是额外的。

您可以使用设置为“border-box”的-moz-box-sizing属性来告诉基于Mozilla的浏览器模拟IE在怪癖模式下的工作方式（详见this page）。

Answer 3

很可能与邻近或包含元素中的边距或填充集有关。很难说没有完整的上下文，但也尝试设置div和表的边距和填充属性，看看会发生什么。

Answer 4

好吧，这似乎是经典的IE框模型不一致（或者我会说，bug？）

最简单的方法是在容器div中定义你的div（包含ddd的div），如下所示：

<div id="container">
  <div class="forDiv">ddd</div>
</div>

按如下方式定义CSS属性：

#container
{
  width:100%;
}

.forDiv
{
  border: 3px solid;
}

这应该在IE和Gecko中提供相同的大小。

Answer 5

尝试溢出：隐藏; 我也有同样的问题。然后我得到了这个

link

从那以后我得到了解决方案。使div溢出：隐藏，它对我来说很好。

在Firefox上的CSS问题，边框没有正确显示

5 个答案: