IE7 和浮动元素有问题（当然）答案

【问题标题】：Having issues with IE7 and floated elements (of course)IE7 和浮动元素有问题（当然）
【发布时间】：2010-01-27 07:49:34
【问题描述】：

我正在开发一个具有包装器元素的网站，该元素具有左右侧边栏，每个边栏都浮动在包装器内。由于某种原因，左侧边栏（包含导航）正在清除右侧边栏并将其推到底部。我已经尝试用大约 50 种不同的方式修复它。我最初认为更改大小和/或边距会有所帮助。它没有。我尝试了“显示：内联”修复无济于事。我已经尝试了很多其他的调整，但我无法让它工作。您可以在 www.ibgs2010.org 查看该站点，并且 css 是 www.ibgs2010.org/css/style.css（我正在尝试使用 IE7 特定的样式表来修复它）。如果有人可以提供帮助，我将不胜感激。我今天花了大约 3 个小时来解决这个小问题。

【问题讨论】：

标签： css internet-explorer-7

【解决方案1】：

看起来问题出在 ajaxloader div - 将其宽度设置为 697px（与右侧边栏相同），这应该可以解决您的问题。

【讨论】：

这修复了它！谢谢！我没有意识到 ajaxloader 被设置为对于该区域来说太大并将该 div 向下推。
作为未来的提示，使用 IE 开发人员工具栏检查填充、边距和元素宽度如何影响布局。您通常可以非常快速地跟踪此类问题。

【解决方案2】：

尝试删除侧边栏类上的边距和填充，并设置一个内部包装器并设置边距和填充。这种方式更安全，这样边距就不会增加 div 元素的大小。浏览器有不同的方式来渲染元素的边距和内边距。

希望对你有所帮助。

干杯

【讨论】：

【解决方案3】：

我认为只是浮动内容被认为太宽而无法容纳 - 所以，它浮动它到它会的位置。

您可以尝试将position 与left 和right 分别替换为right：

.content.wrapper {
   position: relative; /* establish boundary for absolute positioning */
}

.sidebar.left {
   position: absolute;
   top: 0px;
   left: 0px;
}

.sidebar.right {
   position: absolute;
   top: 0px;
   right: 0px;
}

【讨论】：

【解决方案4】：

我建议你添加以下内容：

#ajaxloader {
    width: 737px;
    float: left;
}

737px的宽度是由.sidebar.right的697px宽度加上40px的左内边距得出的

添加此功能后，IE7 和 Firefox 版本看起来应该相同，只是增加或减少一个像素。

【讨论】：

【解决方案5】：

我将 yahoo reset css 包含在每个页面（或 css 文件）的开头。这确实有助于平衡竞争环境。同样对于 IE，请始终记住指定宽度（即使它是 100%），如果您是浮动的，请确保显示：内联。

【讨论】：

-1 如果您查看 css，您会发现正在使用 Eric Meyer 的 css 重置，并且相关 div 已设置宽度。