Question

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

嗯，我几乎把它搞清楚了。在我在Stack Overflow上找到的技术结合了一个漂亮的CSS hack用于修复宽度问题和用于居中的文本对齐技巧，以及尝试不同的边距/填充值，我有一个近乎完美的布局。我正在为朋友的姨妈这样做，你可以在www.allfourseasonslawncare.com/index.php看到我到目前为止（index.html是她原来的网站，她为她付了500美元。我是使用CSS重新创建页面

我现在唯一的错误就是在IE中，左栏的左边距约为30像素，左栏内的所有元素左边距都为30像素。

我可以使用html＆gt;身体技巧轻松修复此问题，为IE提供更大的负边距，但我正在试图找出这个神奇边缘的来源，以便我可以寻找另一种解决方案。有什么想法吗？

Answer 1

这可能是因为你的ul元素有30px的余量。尝试为每个列表项添加一个范围，然后添加填充。

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

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

将clearfix放入css之后，然后转到包装所有列的包装器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像素边距来自何处。作为一个快速的解决方案，我在585像素的#content div上设置了一个恒定的宽度，并给出了边距而不是填充。

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

CSS：浮动div和负边距

2 个答案: