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 在怪异模式下的操作方式（请参阅 此页面了解详细信息）。

Answer 3

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

链接

来自我的 得到解决方案。使 div 的溢出：隐藏，它对我来说效果很好。

Answer 4

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

Answer 5

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

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

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

并定义 CSS 属性如下所示：

#container
{
  width:100%;
}

.forDiv
{
  border: 3px solid;
}

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