本文详细介绍了一种使用DIV实现框架布局的方法，并解决了IE6和IE7下的兼容性问题。
问这样的问题的人很多，我对此有比较深入的研究，但自己从来没有给出过完整的解答与分析，觉得有些对不住蓝色理想的列祖列宗。
先请看demo：
大家看到，此时div的实际高宽，完全由left / right / top / bottom这四个属性所掌控着，于是我们便可以借助这个特性，轻松地完成div仿框架的效果了：
让我们将应该有滚动条的地方的滚动条效果折腾出来：
以上方法其实早已由wiseinfo在 Html+CSS 构建 B/S结构软件界面 — 布局篇 — position方式中进行过介绍，在该文中，ie6亦是分而治之的，它的方法是在html代码顶部加入“<?xml version=”1.0″ encoding=”UTF-8″?>”，使得ie6进入quirks mode（怪异模式）来完成ie6下的div仿框架，但这样做将出现一些影响比较显著的弊端：
1. quirks mode下的ie6连盒模型都变了，就是说你在页面中写任何内容就要慎用padding和border，况且quirks mode下的变化还不止这一点。
2. 如果底部使用绝对定位，则会发生“绝对定位基对象（在此为body）高度为偶数时，出现1px空隙”的bug。
于是我们需要另辟蹊径。
在很多次失败之后，我终于发现有一个标签可以救ie6于水深火热，那就是最伟大的“<html>”标签，它继承了ie6 quirks mode（怪异模式）下的盒模型状态。
利用这一点，我们可以在不太轻松的调整之后完成以下效果：
再用下我们的二列布局知识来完成最终形态，在此我们将艳遇著名的3px bug（不喜欢它可以找点别的办法）：
现在我们拥有了ie6的仿框架和非ie6的div仿框架的最终形态，只需要利用hack做个简单的加法则行了：
（当然，同一属性写两遍，后面的属性所对应的值将覆盖前者，这个基础的优先级基础大家还需要温故一下。）
（再“当然”一下——当然，有人对hack深恶痛绝，那么请在使用之前， 阅读此文看看是否能消消心头之恨。）
它很强大而实用，真的：
但在实际应用中主体部分常常是个iframe，加个iframe，IE7则无法适应。T_T
而且……其实IE7下还不止这一点bug（虽然可以直接overflow-y:scroll，但我于心不忍）。
所幸IE7和IE6的html标签有着相同的盒模型，所以可以直接将IE6 only的部分修改为IE6+IE7 only。
iframe无法适应高度的bug也一起被修复了，人生真美好。
先请看demo：
提示：您可以先修改部分代码再运行
大家看到，此时div的实际高宽，完全由left / right / top / bottom这四个属性所掌控着，于是我们便可以借助这个特性，轻松地完成div仿框架的效果了：
提示：您可以先修改部分代码再运行
让我们将应该有滚动条的地方的滚动条效果折腾出来：
提示：您可以先修改部分代码再运行
以上方法其实早已由wiseinfo在 Html+CSS 构建 B/S结构软件界面 — 布局篇 — position方式中进行过介绍，在该文中，ie6亦是分而治之的，它的方法是在html代码顶部加入“<?xml version=”1.0″ encoding=”UTF-8″?>”，使得ie6进入quirks mode（怪异模式）来完成ie6下的div仿框架，但这样做将出现一些影响比较显著的弊端：
1. quirks mode下的ie6连盒模型都变了，就是说你在页面中写任何内容就要慎用padding和border，况且quirks mode下的变化还不止这一点。
2. 如果底部使用绝对定位，则会发生“绝对定位基对象（在此为body）高度为偶数时，出现1px空隙”的bug。
提示：您可以先修改部分代码再运行
于是我们需要另辟蹊径。
在很多次失败之后，我终于发现有一个标签可以救ie6于水深火热，那就是最伟大的“<html>”标签，它继承了ie6 quirks mode（怪异模式）下的盒模型状态。
提示：您可以先修改部分代码再运行
利用这一点，我们可以在不太轻松的调整之后完成以下效果：
提示：您可以先修改部分代码再运行
再用下我们的二列布局知识来完成最终形态，在此我们将艳遇著名的3px bug（不喜欢它可以找点别的办法）：
提示：您可以先修改部分代码再运行
现在我们拥有了ie6的仿框架和非ie6的div仿框架的最终形态，只需要利用hack做个简单的加法则行了：
（当然，同一属性写两遍，后面的属性所对应的值将覆盖前者，这个基础的优先级基础大家还需要温故一下。）
（再“当然”一下——当然，有人对hack深恶痛绝，那么请在使用之前， 阅读此文看看是否能消消心头之恨。）
提示：您可以先修改部分代码再运行
它很强大而实用，真的：
提示：您可以先修改部分代码再运行
但在实际应用中主体部分常常是个iframe，加个iframe，IE7则无法适应。T_T
提示：您可以先修改部分代码再运行
而且……其实IE7下还不止这一点bug（虽然可以直接overflow-y:scroll，但我于心不忍）。
提示：您可以先修改部分代码再运行
所幸IE7和IE6的html标签有着相同的盒模型，所以可以直接将IE6 only的部分修改为IE6+IE7 only。
提示：您可以先修改部分代码再运行
iframe无法适应高度的bug也一起被修复了，人生真美好。
提示：您可以先修改部分代码再运行
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
