CSS：浮动 div 和负边距答案

【问题标题】：CSS: on floating divs and negative marginsCSS：浮动 div 和负边距
【发布时间】：2011-04-04 09:35:34
【问题描述】：

所以我想要一个与 IE 兼容的居中、恒定宽度、三列布局，并且其列将拉伸到所有列的高度相同（等于具有最高内容的列的高度）。我知道——继续做梦吧？

嗯，我几乎想通了。在将我在 Stack Overflow 上找到的技术与用于修复宽度问题的漂亮 CSS hack 和用于居中的文本对齐技巧以及尝试不同的边距/填充值相结合后，我有了一个近乎完美的布局。我正在为朋友的阿姨做这件事，你可以在 www.allfourseasonslawncare.com/index.php 看到我到目前为止所拥有的东西（index.html 是她的原始网站，她花了 500 美元为她制作。我是使用 CSS 重新创建页面）

我现在遇到的唯一错误是，在 IE 中，左列的左边距约为 30 像素，而左列内的所有元素都有第二个 30 像素的左边距。

我可以使用 html>body 技巧轻松解决此问题，为 IE 提供更大的负边距，但我试图找出这个神奇的边距来自哪里，以便我可以寻找另一种解决方案。有什么想法吗？

【问题讨论】：

所以。许多。移动。元素。动画 Gif。闪光。移动文本。天啊！不过布局看起来更好！
是的，为动画废话道歉。 flash 和 gifs 是原始站点的一部分，顶部的选框是应网站管理员的要求。边距难题的更多部分：即使删除了#nav div 和底层元素的所有样式，30 像素左右的左边距仍然存在。但是，我注意到边距没有出现在“关于我们”页面上，而出现在所有其他页面上。这些页面之间的唯一区别应该是#content div。我会尽快验证这一点。
最后一次更新 - 我验证除了 #content div 之外，每个页面之间没有任何变化。我还意识到每个遇到边距问题的页面都包含一个表格。作为测试，我从“联系我们”页面中删除了该表。边缘消失了。以下是导致此错误的原因是什么？ #内容表{宽度：100%；左边距：自动；边距右：自动；文本对齐：居中； }

标签： css internet-explorer layout css-float margin

【解决方案1】：

这可能是因为你的 ul 元素有 30px 的边距。尝试为每个列表项添加一个跨度，然后添加填充。

此外，关于布局，您不需要为每一列添加边距（我看到您在 .leftRail、.rightRail 等上有边距）。我注意到您的 .columnWrapper 元素只有 615px 宽，因此您使用负边距来移动这些元素。

相反，您可以使用 clearfix hack 来有效地浮动元素。（下面是 CSS 的链接，将其粘贴到 CSS 文件的底部）

在您将 clearfix 放入您的 css 之后，您将转到包装所有列的包装 div 并简单地在其上放置一个 class="clearfix"。

然后，您只需将每一列向左浮动（将 .rightRail 向右浮动），指定宽度，瞧！它应该是一个 100% 有效、不那么麻烦的解决方案。

当你 hack 太多时，IE 往往会出错。如果您需要任何帮助，请发表评论。

清除修复： http://gist.github.com/550114

【讨论】：

我避免使用 clearfix 解决方案（我最初使用的）的原因是我希望柱子能够拉伸以匹配最高柱子的高度。当我使用 clearfix 解决方案时，如果内容（中心栏）超出了侧栏，栏杆会停止，您会在内容的任一侧看到页面背景。我会尝试跨度解决方案。感谢您将我引导至 ul 元素。我一直专注于#nav div 试图找到答案
所以快速更新 - 在注释掉 #nav ul 元素下的“填充：0 0 0 35px”行后，第二个边距消失了，但第一个边距（整个左侧边栏被滑过) 仍然存在。我尝试注释掉 CSS 的整个#nav 部分（包括#nav 中的所有元素），并且保留了边距。所以问题出在 leftRail 上。现在我将使用 html>body 修复，但知道为什么 IE 讨厌带有负边距的左浮动 div 吗？

【解决方案2】：

所以我昨天花了一两个小时来解决它，今天早上又花了一个小时（发布更新，因为我开始接近我自己的问题），我终于弄明白了。

在 Internet Explorer 中，“width: 100%”命令被解释为父元素的整个宽度，而不是宽度减去填充。这使表格的宽度为 615 像素（中心列的宽度）。看到这会超出容器，Internet Explorer 只考虑左侧填充，并且表格在列的右侧延伸了 15 个像素（左侧填充的大小）。

由于它延伸到列之外，这重新排列了所有浮动元素，以使 Internet Explorer 看起来合乎逻辑。也就是说，出于某种不敬的原因，将左导轨移动了右侧填充（15 像素）到左侧填充的右侧（15 像素进入中心列）的距离，因此总共移动了它30 像素到中心列，或神奇的 30 像素边距。

解决方案？我仍在努力。作为实验，我将填充从#content div 移动到#center div，这导致问题出现在 Chrome 中，同时在 Internet Explorer 中解决。不过，至少主要问题得到了回答。我们现在知道神奇的 30 像素边距从何而来。作为一个快速的解决方案，我在 #content div 上设置了一个 585 像素的恒定宽度，并为其赋予了边距而不是填充。

#center{
    float:left;
    width:615px;
    margin-right:-615px;
}
#content{
    width:585px;
    margin:10px 15px 10px 15px;
}

【讨论】：