【css】怪异模式下的盒模型
2012-12-03 14:28 sniper007 阅读(1813) 评论(0) 编辑 收藏 举报怪异模式下声明的宽度和高度包含 padding和border在内。因此元素显示出来要比其他浏览器里小。
我一直认为写生先写意，从“意”的角度来讲，盒子模型在IE和其他浏览器中的差异是这个意思（注意一下画作的点睛之笔--夺命诱惑之梦露式美人痣）：
从写实的角度来见，请看具体的例子：
可见，定义好’width’，’height’，’padding’ 还有 ’border’的元素，在IE的兼容性模式里，要比其他浏览器中小。差距还真够大的，常言道：差之毫厘，谬以千里，这何止是毫厘啊，有几公里那么多！！
这个 bug，会引起布局上的问题，导致布局混乱。严重之极。稍有正义感的江湖人士，无不欲除之而后快，但何从下手呢？常言又到，斩草须除根，所以，还须先找到其错误的根源才好。
其实，IE的盒模型bug的实质，是 ”width” 和 “height” 的作用位置的问题。
PS：一般没有DTD定义，浏览器会自动促发quirks模式，但是刚才测试了，发现，ie10及其他标准浏览器，都不会促发怪异模式，IE9，IE8，IE7，IE6会促发，
测试代码如下：
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>无标题文档</title>
5 <style type="text/css">
6 *{padding:0;margin:0;}
7 .wrap{background:#0046a3;}
8 .inner{margin:50px;padding:50px;border:5px solid #f00;width:500px;background-color:#0066CC}
9 </style>
10 </head>
11
12 <body>
13 <div class="wrap">
14 22
15 <div id="inner" class="inner">
16 11
17 </div>
18 </div>
19 </body>
20 </html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>无标题文档</title>
5 <style type="text/css">
6 *{padding:0;margin:0;}
7 .wrap{background:#0046a3;}
8 .inner{margin:50px;padding:50px;border:5px solid #f00;width:500px;background-color:#0066CC}
9 </style>
10 </head>
11
12 <body>
13 <div class="wrap">
14 22
15 <div id="inner" class="inner">
16 11
17 </div>
18 </div>
19 </body>
20 </html>
