《
IE盒子模型和标准W3C盒子模型》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302335K2013.htm
代码2：
盒子模型是CSS中一个主要的概念，理解了盒子模型才干更好的排版。实在盒子模型有两种，分辨是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不雷同，先来看看咱们熟习的标准盒子模型：
代码2 与代码1 独一的不同的就是顶部加了 DOCTYPE 申明。在所有阅读器中都显示“尺度 W3C 盒子模型”。
例：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，如果用标准 W3C 盒子模型说明，那么这个盒子需要盘踞的位置为：宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的实际大小为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px；假如用IE 盒子模型，那么这个盒子须要占领的地位为：宽 20*2+200=240px、高 20*2+50=70px，盒子的实际大小为：宽 200px、高 50px。
所认为了让网页能兼容各个浏览器，让我们用标准 W3C 盒子模型,IE的有条件注释优点和缺点。
--> [
网站建设之]IE盒子模型和标准W3C盒子模型
上面的代码不加上 DOCTYPE 声明，在 IE 浏览器中显示“IE盒子模型”，在 FF 浏览器中显示“标准 W3C 盒子模型”。
从上图可以看到标准 W3C 盒子模型的规模包括 margin、border、padding、content，并且 content 部分不包含其余部门。
代码1：
IE 盒子模型
Tag：盒子模型 盒子模型
再用 jQuery 做的例子来证明一下,IE浏览器的Css if hack条件语法操作。
那应当取舍哪中盒子模型呢？当然是“标准 W3C 盒子模型”了。怎么样才算是抉择了“标准 W3C 盒子模型”呢？很简略，就是在网页的顶部加上 DOCTYPE 声明。如果不加 DOCTYPE 声明，那么各个浏览器会依据本人的行动去懂得网页，即 IE 浏览器会采用 IE 盒子模型去解释你的盒子，而 FF 会采取标准 W3C 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，如果加上了 DOCTYPE 声明，那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。
<,
IE浏览器Css if hack条件语法操作说明;html>
<head>
<title>你用的盒子模型是？</title>
<,
ie中的flash出现激活框“单击以激活并使用此控件”的解决方法;script language="javascript" src=",
IE与FF不兼容网页布局CSS问题;jquery.min.js"></script>
<script language="javascript">
var sBox = $.boxModel ? "标准W3C":"IE";
document.write("你的页面目前支撑："+sBox+",
IE8中text-align center偏左的解决办法;盒子模型");
</script>
</head>
<body>
<,
IE6绝对定位的bug及其解决办法;/body>
</html>
从上图能够看到 IE 盒子模型的范畴也包含 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 局部包括了 border 跟 pading。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html>
<head>
<title>你用的盒子模型是标准W3C盒子模型</title>
<script language="javascript" src="jquery,
IE6灵异事件之歌剧院魅影.min.js"></script>
<script language="javascript">
var sBox = $.boxModel ? "标准W3C":"IE";
document,
IE6到底支持不支持!important.write("您的页面目前支持：",
IE6中PNG图像不透明是什么问题;+sBox+"盒子模型");
</script>
</head>
<body>
</body>
</html>
(责任编辑：网站建设)
IE盒子模型和标准W3C盒子模型相关文章