CSS - 保证金是坏事？

我注意到一些浏览器在页边空白处有问题，尤其是当元素浮动时。举例来说，我在Firefox中做的这个网站看起来很好，但IE7看起来完全没有问题。我也在几个Linux浏览器上进行了测试，其中一些出现类似的错误。CSS - 保证金是坏事？

该网站是 http://w3box.com/mat

这看起来在FF3.0罚款，据我可以告诉。在FF2还没有看到它，或IE6。这是为什么发生？是因为我有浮动DIVs与指定的利润率？

有什么我应该避免或应该做的不同？

编辑：所以它看起来像我的标签是螺丝钉的来源。我在CSS中没有定义的图像中放置了图像，这些图像已经浮动在图像上并与边距相结合。这些搞砸了一切，我必须重做这些。

此外，当我使用XHTML Strict代替时发生了一些事情:) Thanx everyone！我会尝试解决这个我自己的:)

来源

2010-01-25 Kenny Bones

在IE8中看起来不错，如果你有兴趣的话。 – Sapph 2010-01-25 09:07:24

尝试自己开发'XHTML 1.0 strict'或'HTML 4.01 strict'网站。这解决了很多boxmodel问题， – 2010-01-25 09:16:35

谢谢！现在该网站看起来就像我错误的IE浏览器:)意味着我需要重新定位一切，但那很好！只要两者都一样。 :) Thanx的提示:) – 2010-01-26 06:50:16

Marging不坏，但IE has some troubles与浮动元素的边距。虽然有很多修复的食谱，但我相信在你的情况下，你可以使用绝对定位而不是浮动+边距（当图像被文本包裹时，你并不需要“浮动”行为）

来源

2010-01-25 09:14:35 Dmitry

这是IE7和错误不会发生在IE8中。刚刚测试过它。我还没有在IE6中测试过它，因为我找不到它仍然安装的单个终端服务器。虽然我会尝试绝对定位。没有必要超过必要的混乱代码！ :) – 2010-01-25 10:04:26

看到了，事情是。我真的不明白为什么会发生这种情况。我的意思是，DIV #contentInner甚至没有浮点数。而这个利润就像是翻了一番。它可能是我放在那里的图像？他们没有自己的类，但我在标记中指定了CSS代码。这可能是解释？因为我在标题菜单和#contentInner DIV中看到错误。并且这两个标签之前都有标签。 – 2010-01-25 10:13:50

这是标签这就是问题所在。 IE似乎在图像后添加了一些空间。就像换行符或什么的。如果我删除标签，问题就解决了。所以我可能不得不考虑定位它们。 – 2010-01-25 10:24:01

我会建议使用某种形式的CSS框架（蓝图CSS，960网格等），因为他们有一些边距，填充和其他常见的HTML元素重置。你应该发现使用框架跨浏览器开发更容易。

来源

2010-01-25 09:09:44 Kane

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

* {margin：0px; padding：0px; } //最简单的规则...

要了解更多关于CSS重置你可以看看：http://meyerweb.com/eric/tools/css/reset/

然后用条件注释适用于IE7和不同风格的6。

来源

2010-01-25 09:11:10 mamoo

刚试过这个，它并没有真的做任何事情。无论如何，我都会在CSS和HTML中设置它。我把在CSS重置代码虽然:) – 2010-01-25 10:01:29

我不同意如果您想了解关于CSS曲线部分的知识，那么不幸的是，您将了解不同浏览器对CSS做出反应的方式。我甚至不会建议使用重置样式表。如果你将这样做了很多，学习CSS如何工作。如果你使用一个库或者一个你不明白的样式表，你将如何修复它。

来源

2010-01-25 09:16:56 matpol

正如其他答案中提到的那样，它与IE对盒子model的解释有关。

每当任何东西浮动时，IE往往会使指定的边距加倍。这可以通过使用conditional comments的IE的额外样式表修复。

参见：http://www.positioniseverything.net/explorer/doubled-margin.html

来源

2010-01-25 09:16:56

但是这不是用IE7修复的吗？我也这么想。但它似乎不是这样。 – 2010-01-25 10:05:26

IE7对于盒子模型仍然有点古怪 - 它们修复了大多数错误，但仍然存在一些 – 2010-01-25 10:09:13

没有什么错用利润率。

旧版本的IE有一个bug，单靠这一点远远不足以避免使用CSS的核心布局特性之一。具体而言，当你漂浮的物体上，并在同一方向上的保证金，例如：

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

您可以处理这种多种方式，这取决于你的布局这个错误发生在IE浏览器。一种方法是在你的盒子周围增加另一个div，并使用填充来复制相同的空间。

来源

2010-01-25 09:19:20

边距和填充不会产生相同的效果。这是盒子模型的重点。它只会产生相同的效果，没有背景和边框。 – 2010-01-25 09:37:09

是的，你说得对，他们不会产生相同的效果，但是如果你正在修复一个bug，你可能会切换它们以在对象之间提供相同的空间。这绝对取决于情况，但它可以是一种选择。 – 2010-01-25 09:42:23

约定+1恢复 - 好，如果你编辑你的答案，我可以删除它。 :-) – 2010-01-25 10:01:40

CSS - 保证金是坏事？

回答

相关问题