css - Firefox上的css问题，边框无法正确显示

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 在 quirks 模式下的操作方式（有关详细信息，请参阅此页面）。

Answer 3

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

关联

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

Answer 4

很可能与相邻或包含元素中设置的边距或填充有关。如果没有完整的上下文很难判断，但也可以尝试为 div 和 table 设置边距和填充属性，看看会发生什么。

Answer 5

好的，这似乎是经典的 IE 框模型不一致（或者我应该说，错误？）

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

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

并定义 CSS 属性如下：

#container
{
  width:100%;
}

.forDiv
{
  border: 3px solid;
}

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