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

【问题标题】：css issue on firefox, border not show correctlyFirefox上的css问题，边框无法正确显示
【发布时间】：2010-11-23 06:28:56
【问题描述】：

我在 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 有点小。我该如何解决？

【问题讨论】：

div 有点小是什么意思？能详细解释一下吗？

标签： css firefox border

【解决方案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;
}

【讨论】：

due.. 感谢您的快速回复...但它对我不起作用..我在 firefox3 上.....

【解决方案2】：

不同浏览器对待宽度属性的方式不一致——它们是否在宽度中包含边框/填充尺寸，或者是否认为它们是额外的。

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

【讨论】：

【解决方案3】：

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

link

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

【讨论】：

这与线程完全无关，但我的大纲有问题，除了您的建议外，一切都失败了。将“overlow：hidden”放置在应有的位置（在 Firefox 上，我遇到了问题）。

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

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

并定义CSS属性如下：

#container
{
  width:100%;
}

.forDiv
{
  border: 3px solid;
}

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

【讨论】：

似乎是白癜风的开始病例。绝对不是一个好的解决方案，但有时是唯一可用的选择。