html - CSS - 边距是一件坏事？

Question

我注意到一些浏览器的边距有问题，尤其是当元素浮动时。例如，我正在做的这个网站在 Firefox 中看起来不错，但 IE7 似乎完全搞砸了边距。我也在几个 Linux 浏览器上测试了它，其中一些犯了类似的错误。

据我所知，这在 FF3.0 中看起来不错。还没有在FF2或IE6中看到它。为什么会这样？是因为我有具有指定边距的浮动 DIV 吗？

是否有一些事情我应该避免或应该做不同的事情？

编辑：所以看起来我的标签是搞砸的根源。我将图像放置在 CSS 中未定义的图像中，并且上面有浮动，并结合了边距。这些搞砸了一切，我必须重做这些。

另外，当我改用 XHTML Strict 时发生了一些事情 :) 谢谢大家！我会尝试自己解决这个问题:)

score 4 · Accepted Answer

如果你想了解 CSS，我不同意使用库。不幸的是，曲线的一部分是了解不同浏览器对 CSS 的反应方式。我什至不建议使用重置样式表。如果您要经常这样做，请了解 CSS 的工作原理。如果您使用一个库或一组样式表，但您不明白当它损坏时您将如何修复它。

score 3 · Accepted Answer

Marging 还不错，但是IE对浮动元素的边距有些麻烦。虽然有很多修复方法，但我相信在您的情况下，您可以使用绝对定位而不是浮动+边距（当图像被文本包裹时，您并不需要“浮动”行为）

score 3 · Accepted Answer

使用边距没有任何问题。

旧版本的 IE 有一个错误，仅此一点不足以成为避免使用 CSS 的核心布局功能之一的理由。具体来说，当您浮动一个对象并在同一方向上给它一个边距时，这个错误会在 IE 中发生，例如：

.whatever {
    float: right;
    margin-right: 5px;
}

您可以通过多种方式处理此问题，具体取决于您的布局。一种方法是div在您的盒子周围添加另一个并在其上使用填充来复制与边距相同的空间。

score 2 · Accepted Answer

我建议使用某种形式的 CSS 框架（Blueprint CSS、960 Grid 等），因为它们有许多边距、填充和其他常见的 HTML 元素重置。您应该会发现使用框架更容易进行跨浏览器开发。

score 2 · Accepted Answer

不同的浏览器有不同的方式来处理盒子模型。大多数情况下，在 FF、Chrome 或 IE8 中显示良好的网站在 IE6 和 7 中可能会出现问题。要解决此问题，您可以尝试将所有默认边距和填充设置为 0（并根据需要在特定元素上调整它们):

*{ 边距：0px; 填充：0px；} //最简单的规则...

要了解有关 CSS 重置的更多信息，您可以查看： http: //meyerweb.com/eric/tools/css/reset/

然后使用条件注释为 IE7 和 6 应用不同的样式。

score 1 · Accepted Answer

正如其他答案所述，这与 IE 对 box model的解释有关。

每当任何东西浮动时，IE 都会将指定的边距加倍。这可以通过使用条件注释的 IE 额外样式表来解决。

6 回答 6