放弃IE5和IE5.5, 放弃 IE6 Quirks Mode, 这样一来就能省下很多时间。
- http://blog.csdn.net/wangjj_016/archive/2009/03/01/3947776.aspx
- http://www.cnblogs.com/yuzhongwusan/archive/2009/03/11/1408936.html
- http://blog.doyoe.com/
- http://www.chxwei.com/feed.asp?cateID=18
- 英文好文 http://www.smashingmagazine.com/2010/06/07/the-principles-of-cross-browser-css-coding/
很多人都知道在IE和FF下box模型对宽度和高度的解释是不一样的，用起来更是糊里糊涂。看了网上一些文章，本来以为自己很明白，结果越看越迷惑，还是在做些实验验证下自己的结论。
以 div的width为例，IE下设置的width为div的总宽度，包括内容宽度、左右border和左右padding。FF下设置的width为 div的内容宽度，不包括左右border和左右padding。如果宽度同为200像素，而且IE下设了border和padding，则div在IE 下显示比FF下窄。HTML还需要区分DTD,所以这个结论应该对，但是不一定很准确。
实验需要搞明白的问题：
1.IE6 IE7 FF都是如何解释box模型？
2.FF基本符合W3C标准，IE6和IE7在不同DTD下的box模型解析一致么？
3.如何获得统一的外观？
实验要考虑条件：
1.测试浏览器有IE6.0（版本号6.02900.2180），IE7.0（版本号7.0.5730.11） FF2.0（版本2.0.0.2），手头没有IE8.0，有机会再测。
2.测试html4.0 Xhtml(transitional) Xhtml(strict)三种Doctype。
3.IE6不支持important,IE7 FF支持important。
HTML代码：<div id=”content”>11</div> 要求div内容宽度为100px border为5px padding为10px
一、使用HTML4.0怪异模型IE6 IE7 FF下测试
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
1.样式一
#content
{
border:5px solid red;
width:100px;
height:100px;
padding:10px;
}
结论：FF的width为内容宽度，不包括border和padding，IE6和IE7的width为总宽度。网上有人说IE7修改过这个bug，但我用的版本还没有。
2.样式二，使用important修正
#content1
{
border:5px solid red;
width:100px !important; /*ff IE7*/
width:130px; /*IE6*/
height:100px !important;
height:130px;
padding:10px;
}
结论：ie7支持了important，FF内容width=100，IE6内容width=100，IE7内容width=70；
3.样式三，使用*修正
#content1
{
border:5px solid red;
width:100px; /*ff*/
*width:130px; /*IE6 IE7*/
height:100px;
*height:130px;
padding:10px;
}
结论：ie7支持了important，FF内容width=100，IE6 IE7内容width=100；
IE6 IE7的怪异模型一致，width为总宽度；FF下widht为内容宽度。
二、使用HTML4.0标准模型IE6 IE7 FF下测试
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd“>
1.样式一
#content
{
border:5px solid red;
width:100px;
height:100px;
padding:10px;
}
结论：FF IE6 IE7显示一致，width同为内容宽度。
2.样式二，使用important修正
#content1
{
border:5px solid red;
width:100px !important; /*ff IE7*/
width:130px; /*IE6*/
height:100px !important;
height:130px;
padding:10px;
}
结论：FF内容width=100，总width=130，IE6 IE7显示一致，内容width=130,总width=160。
三、使用XHTML transitional DOCTYPE在IE6 IE7 FF下测试
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
</html>
1.样式一
#content
{
border:5px solid red;
width:100px;
height:100px;
padding:10px;
}
结论：FF IE6 IE7显示一致，width同为内容宽度。
2.样式二
#content
{
border:5px solid red;
width:100px !important;
width:130px;
height:100px !important;
height:130px;
padding:10px;
}
结论：FF内容width=100，总width=130，IE6 IE7显示一致，内容width=130,总width=160。
对比1和2可以看出transitional下，IE6 IE7 FF2对box模型的解释是一致的。
四、使用XHTML strict DOCTYPE在IE6 IE7 FF下测试
过程结论同三。
总结：只有使用IE怪异模型时，IE和FF对box模型的解释不一致。IE的标准模型和FF下的width宽度都为内容宽度。有过度DTD而没有URI会 导致页面以怪异模型表现，DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以怪异模式表现。开发中必须明确自己使用的DTD，一个项目最 好统一使用一个DTD。我推荐使用transitional。
我之前的理解还是比较片面的，也没高清怪异模型和标准模型到底怎么区分。
怪异模式：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
标准模式：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd“>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd“> 宽松的
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
作者：yaozer 原文链接：放弃 IE6 Quirks Mode吧
欢迎转载, 非常感谢你能注明作者和原始出处。
Had to tweet this. I ride when I can – but will have to do this all next week. More people certainly should.
My website is what causes acne
Good info, worth bookmarking. Thanks!
This article provide many tips. Very useful to me. Thanks a lot ?
My site is about Stock quote