IE 6 和 7 中的流体宽度布局问题答案

【问题标题】：Problem with fluid width layout in IE 6 & 7IE 6 和 7 中的流体宽度布局问题
【发布时间】：2011-07-15 17:28:56
【问题描述】：

http://dl.dropbox.com/u/18795563/blog/index.html 在 IE 6、7 和 8 中调整窗口大小时，会发生这种情况：http://img64.imageshack.us/i/aaawz.png/ 窗口最大化时很好，但是当我尝试调整它的大小时，侧边栏在某些窗口大小时被推下，大部分时间都很好，但我仍然想解决这个问题。

【问题讨论】：

标签： html css layout internet-explorer-7 internet-explorer-6

【解决方案1】：

尝试将主要部分的宽度设置为 74.99%

#main {
     width: 74.99%
}

【讨论】：

这可行，但在 Firefox/Chrome 中，它变得 ~1px 太窄了。这只是一个小问题。要修复它，我建议使用width: 75%; *width: 74.99%。这样，only <=IE7 将得到修复。
只为 IE 的特定 css 做一个条件语句。黑客 css 不是一个好的标准 IMO。
通过为 IE 8 和更早版本创建条件语句来修复问题。我不确定我是否也需要对 IE9 进行此修复？
是的...我用IE9检查过，它也有同样的问题

【解决方案2】：

我看到您在侧边栏 ID 中有一个向右浮动和向左浮动。这是某种修复吗？

正如我们所说，微软正在积极尝试摆脱 IE6 的世界。世界上只有 5% 的人在使用它，其中大多数在中国，你可以很肯定地说，没有必要提供应急措施。

可以理解，这不适用于两个更当前的版本，但值得注意。

【讨论】：

【解决方案3】：

使用媒体查询的最佳方法是：这是一个如何解决这个问题的例子，你可以试试手机、桌子等

<!-- Big screen -->
<link rel="stylesheet" type="text/css" href="CSS/main.css" media="screen and (min-device-width: 800px)" />

<!-- Tablet pc -->
<link rel="stylesheet" type="text/css" href="CSS/tablet.css" media="screen and (min-device-width: 481px) and (max-device-width: 799px)" />

<!-- Mobile -->
<link rel="stylesheet" type="text/css" href="CSS/mobile.css" media="only screen and (max-device-width: 480px)" />

<!-- If is lower than IE9 use conditional comments -->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="CSS/main.css" media="all" />

这是在 IE 不起作用的情况下： http://www.abovethefold.co.uk/blog/2008/09/23/css-ie7-compatibility-and-wordpress-updates/

甚至还有一张解释 thouse 问题的表格： http://caniuse.com/css-mediaqueries

【讨论】：