（转）IE的box模型显示bug

box模型即由<div>等块元素的 margin、padding、border、width、height 等属性构成的显示模型，它是CSS布局的基础。通过设置<div>的各种属性，可以得到任何想要的页面效果。

各个元素的含义如下：

margin: box外边界到外层元素的距离，即余白。
border: box的边界宽度。
padding: box内的内容到box内边界的距离，即边距。
width: box的宽度。
height: box的高度。

其中有问题的就是 width 和 height 的定义。一般的浏览器将 width 和 height 定义为除掉 margin、padding、border 之后的box内容的大小，实际上 box 所占有的面积为定义的 width/height 再加上 margin、padding、border的大小。

下图演示了一个box模型的大小计算方式，背景中每个方格为 10px。源代码如下：

#box {
width: 150px;
height: 100px;
background: #F00;
border: solid 20px green;
padding: 30px;
margin: 10px;
}
<div id="box">
<div id="content"></div>
</div>

可以看到，这个 150x100 的 box 实际上中间的内容部分为 150x100，算上 margin、border、padding 的总大小为 270x220。

而 IE 在 Quirk模式(兼容模式)下，计算width和height时会将margin、border、padding算进去， width和height成为了box的总大小。上面的代码在 IE 下显示结果如下：

那么如何让 IE 与其他的浏览器显示效果相同？可以通过在HTML文档开头指定 DOCTYPE 使 IE 工作在 Standard模式而不是 Quirk模式下。例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
....

下面是各种 DOCTYPE 下IE对box模型的渲染方法的测试页面，有兴趣的可以用IE打开看看。

box-model-testpage.zip

转载于:https://www.cnblogs.com/codeyu/archive/2008/11/14/1333533.html

（转）IE的box模型显示bug相关推荐

IE的box模型显示bug
原作者charlee.原始链接http://tech.idv2.com/2007/01/02/ie-box-model-bug/以及本声明. box模型即由<div>等块元素的 margi ...
vue中使用baidushare分享到微信无法显示bug解决方案
vue中使用baidushare分享到微信无法显示bug解决方案参考文章: (1)vue中使用baidushare分享到微信无法显示bug解决方案 (2)https://www.cnblogs.co ...
Firefox开发者工具里查看HTML元素的Box模型
box模型的组成部分: Content box:通过width和height属性指定大小. padding box:衬垫.包裹content盒模型. border box margin box 如下图 ...
flowable连线名称不显示bug修复说明
文章目录 flowable连线不显示bug修复说明 flowable连线不显示bug修复说明在flowable6.4版本(分享牛老师)修复了流程图中连线不显示的bug.由于Flowable官方对于这 ...
vue页面渲染（请求返回的后端）data，文本换行与显示bug 的分析与解决提示
vue页面渲染(请求返回的后端)data,文本换行与显示bug 的分析与解决提示问题说明: vue项目,后台一经修改文案[介绍内容]后,前端接收显示实时数据,却无法换行? 原因分析: 后台页面的表单 ...
ueditor插入图片调节框显示bug
当编辑框高度固定可内部滚动时,ueditor插入图片调节框显示bug 在使用百度euditor的编辑器时,我们常常需要让用户对插入的图片进行拉伸修改大小.当euditor的编辑框不随内容的增加而调节高 ...
英雄联盟(LOL)3d模型显示
英雄联盟(LOL)3d模型显示. 参考资料:http://code.google.com/p/lolblender/wiki/fileFormats 注:由于版本升级,lol模型的骨骼文件的文件格式发 ...
CREO：CREO软件之零件【工具(调查/模型意图/实用工具)】、【视图(可见性/方向/模型显示/显示/窗口)】的简介及其使用方法(图文教程)之详细攻略
CREO:CREO软件之零件[工具(调查/模型意图/实用工具)].[视图(可见性/方向/模型显示/显示/窗口)]的简介及其使用方法(图文教程)之详细攻略目录
CAD绘图布局中有部分模型显示不出来怎么办？
可能是我们在制图的时候,会有CAD图纸大小不兼容问题.那这个时候就需要转换CAD图纸格式,把高版本图纸转换成低版本或者是反过来.今天就给大家说一个比较简单不用下载软件的好办法. 1.在你的电脑桌面上打 ...

（转）IE的box模型显示bug

（转）IE的box模型显示bug相关推荐

最新文章

热门文章