CSS：浮动 div 和负边距

Question

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

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

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

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

Answer 1

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

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

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

在 css 中放置clearfix 后，转到包装所有列的包装器 div，然后简单地放置一个 class="clearfix"在它上面。

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

当你破解太多时，IE 往往会出现错误。如果您需要任何帮助，请评论。

---

Clearfix： http://gist.github.com/550114

Answer 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;
}