原作者charlee、原始链接http://tech.idv2.com/2007/01/02/ie-box-model-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打开看看。
分享到:
相关推荐
border-box:怪异盒模型,低版本IE浏览器中的盒模型 现代浏览器和IE9+默认值是content-box。 语法格式: box-sizing:content-box | border-box 区别: content-box:padding和border不被包含在定义的width和height...
CSS 将所有的网页元素都看做是一个矩形框,这个框由元素的内容、填充(padding)、边框(border)和边界(margin)组成。
这是修复bug的dosbox-0.74,RedHat系列用户需要安装的可以直接安装,并且内含DEBUG.EXE,LINK.EXE,MASM.EXE。
15 兼容大部分浏览器(IE7 IE8 IE9 IE10 Chrome Firefox Safair Opera等) 16 支持多皮肤 17 支持邮箱登录 手机登录 用户名登录 18 更多功能可以定制 官网下载地址:http: flyui net fly box index ...
一个好的用于html demo设计的box模型。
【资源说明】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目...基于Layabox+Unity制作的模型展示场景源码(鼠标、手指操控).zip
3dmax插件神器-009-显示Box.mse
dosbox,想必做汇编的人用得着吧,大家有资源共享哈
才用例子全面介绍CSS盒模型 Box Model 为css学习找到一条捷径。
官网下载最新版本: ... 企业网盘,网盘,公司网盘,公司云盘,文件管理...15. 兼容大部分浏览器(IE7,IE8,IE9,IE10,Chrome,Firefox,Safair,Opera等) 16. 支持多皮肤 17. 支持邮箱登录,手机登录,用户名登录
15 兼容大部分浏览器(IE7 IE8 IE9 IE10 Chrome Firefox Safair Opera等) 16 支持多皮肤 17 支持邮箱登录 手机登录 用户名登录 18 更多功能可以定制 官网下载地址:http: flyui net fly box index php">ASP NET...
DOSBox 是一个 DOS 模拟程序,由于它采用的是 SDL 库,所以可以很方便的移植到其他的平台。目前,DOSBox 已经支持在 Windows、Linux、Mac OS X、BeOS 、palmOS、Android 、webOS、os/2等系统中运行。
matlab_box-jenkin的模糊模型
在ie下模拟css3中的box-shadow(阴影)可以使用ie的Shadow(阴影)滤镜 基本语法:filter: progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度(数值), Strength=阴影半径(数值));...
15 兼容大部分浏览器(IE7 IE8 IE9 IE10 Chrome Firefox Safair Opera等) 16 支持多皮肤 17 支持邮箱登录 手机登录 用户名登录 18 更多功能可以定制 官网下载地址:http: flyui net fly box index php">ASP NET...
lotus domino 表单文档相关--DialogBox弹出显示表单窗口
该研究主要关注人工神经网络(ANN)模型在长期预测外国游客数量方面的适用性,并将人工神经网络的结果与传统时间序列分析和Box Jenkins的模型解决方案进行比较。 时间序列统计理论和方法用于选择合适的技术,基于...
使用List Box显示系统逻辑磁盘驱动器列表 使用List Box显示系统逻辑磁盘驱动器列表 使用List Box显示系统逻辑磁盘驱动器列表
盒模型是有两种标准的,一个是标准模型,一个是IE模型。 从上面两图不难看出在标准模型中,盒模型的宽高只是内容(content)的宽高, 而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽...