IE盒子 VS W3C盒子

最新推荐文章于 2022-07-30 12:44:41 发布

阿娇

最新推荐文章于 2022-07-30 12:44:41 发布

阅读量606

点赞数

文章标签： ie c border xhtml 浏览器 html

盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟悉的标准盒子模型：

　　从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

　　IE 盒子模型

　　从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

　　例：一个盒子的 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 盒子模型”了。怎么样才算是选择了“标准 W3C 盒子模型”呢？很简单，就是在网页的顶部加上 DOCTYPE 声明。如果不加 DOCTYPE 声明，那么各个浏览器会根据自己的行为去理解网页，即 IE 浏览器会采用 IE 盒子模型去解释你的盒子，而 FF 会采用标准 W3C 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，如果加上了 DOCTYPE 声明，那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

　　再用 jQuery 做的例子来证实一下。

　　代码1：

<html> <head> <title>你用的盒子模型是？</title> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> var sBox = $.boxModel ? "标准W3C":"IE"; document.write("您的页面目前支持："+sBox+"盒子模型"); </script> </head> <body> </body> </html>

　　上面的代码没有加上 DOCTYPE 声明，在 IE 浏览器中显示“IE盒子模型”，在 FF 浏览器中显示“标准 W3C 盒子模型”。

　　代码2：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>你用的盒子模型是标准W3C盒子模型</title> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> var sBox = $.boxModel ? "标准W3C":"IE"; document.write("您的页面目前支持："+sBox+"盒子模型"); </script> </head> <body> </body> </html>

　　代码2 与代码1 唯一的不同的就是顶部加了 DOCTYPE 声明。在所有浏览器中都显示“标准 W3C 盒子模型”。

　　所以为了让网页能兼容各个浏览器，让我们用标准 W3C 盒子模型。

}

function checkBox2(){
var flag = $.boxModel;
alert("2:"+ flag);

}

$(function(){
checkBox();
checkBox2();

});

=====================================================================

浏览器box模型分析

方法一：（比较有争议的说法，有说不符合标准、有说用两个div、有说比hack强-------不过确实是简单的一个解决办法）
这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：

#box { width: 100px; border: 5px; padding: 20px } DivCSS网页布局 W3C标准 - W3Cbbs.com: X* t0 o l' C$ ~+ e
DivCSS网页布局 W3C标准 - W3Cbbs.com' g2 m0 C8 ^* [' z, n
这样调用它：

<div id=”box”>…</div>

这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。
www.w3cbbs.com# Z1 x$ ~! t6 M( {
但用CSS也可以达到同样的目的，让它们显示效果一致。* Y" b- B/ a$ Z. ^7 u. R( n

#box { width: 150px } #box div { border: 5px; padding: 20px } ) B$ s0 Z: R5 x) ]
" X2 B, Y4 H3 F4 D* I) v
这样调用：DivCSS网页布局 W3C标准 - W3Cbbs.com, {" p, q! /# b4 ]) [

<div id=”box”><div>…</div></div>

这样，不管什么浏览器，宽度都是150点了。

方法二： hack解决

很多人都知道在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">

=======================================

IE的box模型显示bug

原作者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打开看看。

---转自百度空间

阿娇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE盒子 VS W3C盒子

<br />盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟悉的标准盒子模型： <br /> <br /><br /><br /> <br /> <br />　　从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。<br />　　IE 盒子模型<br /> <br /><br /> <
复制链接

扫一扫