浏览器box模型分析

最新推荐文章于 2023-09-19 17:06:05 发布

不杂当下

最新推荐文章于 2023-09-19 17:06:05 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签：浏览器 xhtml ie border html 测试

本文链接：https://blog.youkuaiyun.com/wangjj_016/article/details/3947776

前端开发专栏收录该内容

49 篇文章

订阅专栏

本文通过实验对比了IE6、IE7和Firefox在不同DOCTYPE下对Box模型的解析，发现只有在IE的怪异模型下，其宽度解释与Firefox不一致。标准模型下，所有浏览器的width均为内容宽度。推荐在开发中使用Transitional DTD以保证统一的外观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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