总结:css盒模型在不同浏览器之间(例如:ie和其他浏览器 如火狐)的差异只存在于ie6之前的版本中,如ie5。在ie6下, Internet Explorer 在标准模式下渲染时使用了 CSS 规范的算法,也就是会显示正确的盒模型,而在 quirks 模式下使用先前的,不规范的算法。即,只有在怪异模式下,css盒模型才会在ie和火狐下存在差异。

但是实际上我们都是使用标准的模式,只要为文档设置一个DOCTYPE,就会使得IE遵循标准兼容模式的方式工作。

//以下摘自百度百科“怪异模式”

在 quirks 模式和标准模式之间一个突出的不同是对 CSS IE盒模型缺陷的处理。在第 6 版之前,Internet Explorer 曾经使用一种决定一个元素的盒模型的宽度和高度的,与 CSS 规范所指定相冲突的算法,而且由于 Internet Explorer 的流行,很多依赖于这种不正确的算法的网页被创建。而在版本 6, Internet Explorer 在标准模式下渲染时使用了 CSS 规范的算法,而在 quirks 模式下使用先前的,不规范的算法。

//以上摘自百度百科“怪异模式”

原文地址:http://www.osmn00.com/translation/213.html

http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/

CSS盒模型图解

下面是一幅关于应用了CSS的元素是如何显示它的尺寸的图示。

在本篇文章中,所有的浏览器在计算盒模型总宽度时处理margin属性的方式都是一致的,所以我们将更多的精力放在padding和border属性上。

W3C盒模型

首先看一下《 the W3C box model》,这里所写出的标准,如果没问题的话,是应该被所有标准的现代浏览器及IE6和它的后续版本所遵循的。在W3C盒模型中,一个块级元素的总宽度按照如下的方程式计算:

总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

对于高度也使用同样的计算方法,但是为了简便起见从现在开始我只说width。

IE盒模型

IE盒模型的计算方式和W3C的很相似,但有一点是非常不同的,这就是:填充和边框并不被包含在计算的范围内。

总宽度 = margin-left + width + margin-right

这就意味着一旦元素拥有横向的填充和/或边框,实际的内容区域(content area )就要扩大来创造出他们占据的空间。

关于IE的版本

IE5.5及更早的版本使用的是IE盒模型。很多人似乎没注意到IE6及更新的版本在标准兼容模式(standards compliant mode)下使用的是W3C的盒模型标准。我们说这是一个好消息因为这意味着此盒模型问题只会出现在IE5.5及其更早的版本中。只要为文档设置一个DOCTYPE,就会使得IE遵循标准兼容模式的方式工作。

解决问题

现在确定了IE6及后续版本都会遵循标准兼容模式,那现在唯一要关注的事情就是如何令IE5.5及更早版本中的网页和其在更现代的浏览器中呈现出的是一致的。如果你目前就遇到了这个问题,那么下面的几个方法会帮助到你,我以我的喜好为它们列出了优先顺序。

  1. 避免导致这个问题的情景
  2. 插入额外的标记
  3. 使用条件注释判断语句
  4. 使用CSS hacks

因为这个由盒模型解析方式不同导致的问题往往只是针对表象上的显示,所以我个人偏好的方法就是尽量避免不去触发IE5.*/Win的这个BUG,而有些时候会不可避免的遇到,那我就会使用下面介绍的方法中的一个。

1.避免导致这个问题的情景

这是我的首选,很简单,就是避免为一个元素同时设置width和padding值或者width和border值,再或者width同时和它们两个值。这确保了所有的浏览器都会一样的去计算元素的总宽度,而不用考虑它们使用哪种盒模型方式。

我这里拿一个例子说明,下面的HTML用来定义一个新闻列表:

  1. <div id="news">
    <h2>News</h2>
    <ul>
    <li>
    <h3>News article 1</h3>
    <p>Lorem ipsum dolor sit amet</p>
    </li>
    <li>
    <h3>News article 2</h3>
    <p>Lorem ipsum dolor sit amet</p>
    </li>
    </ul>
    </div>

为了得到一个250像素宽的列表,且应用1像素的边框和10像素的填充,会用到这样的CSS:

  1. #news {
  2. padding:10px;
  3. border:1px solid;
  4. width:228px;
  5. }

在符合标准的浏览器中,总宽度是250像素(1px left border + 10px left padding + width + 10px right padding + 1px right border)。但在IE5.5及更早的版本中,总宽度只是228像素,因为它并未计算边框和填充的值。

那么该如何避免这个问题呢?让我们假设新闻列表在另一个容器里,比如它在侧边栏(sidebar)里:

  1. <div id="sidebar">
    <div id="news">
    ...
    </div>
    </div>

如果是这样,你可以为父容器(sidebar)设置宽度来达到效果:

  1. #sidebar {width:250px}
  2. #news {
  3. padding:10px;
  4. border:1px solid;
  5. }

2.插入额外的标记

如果情况不容许你使用第一种方法,那可以使用插入额外的标记这个方法。还是使用前面那个例子,这次我们在#news里面插入一个标记:

  1. <div id="news">
    <div>
    <h2>News</h2>
    <ul>
    ...
    </ul>
    </div>
    </div>

使用如下的CSS:

  1. #news {width:250px}
  2. #news div {
  3. padding:10px;
  4. border:1px solid;
  5. }

外层的元素提供宽度,包含在里面的元素提供边框和填充。

是否使用一个额外标记这种妥协式的方式的决定权在于开发者本身。避免使用这种方式的好处是显而易见的,但是一个额外的div标签除了会增加文件的体积和降低代码的可维护性之外,不会产生其他的不良影响。它不会影响到页面的无障碍性以及当CSS文档不存在的时候文档的可阅读性。此外,增加一个额外的标记还会为某些设计上的实现提供便利条件。

3.使用条件注释判断语句

如果没有合适的父容器来控制宽度也不能通过添加额外的标记解决问题,那针对IE 5.*/Win我们就需要设置一个不同的width值了。

我的建议,这么做最安全的方式就是使用条件注释判断语句(conditional comments,)这些内容只能在IE/Win中被解析,下面的代码只有在IE6以下的版本中被执行:

  1. <!--[if lt IE 6]>
    <style type="text/css">
    #news {width:250px}
    </style>
    <![endif]-->

如果你打算使用这个方法,我建议将全部的针对IE 5.*/Win的代码都转移到一个单独的CSS文件中来加载它:

  1. <!--[if lt IE 6]>
    <link rel="stylesheet" type="text/css" href="/css/ie5.css">
    <![endif]-->

4.使用CSS hacks

最后你还可以通过使用一个CSS hack(CSS hack)来为IE 5.*/Win提供修改过的属性值。我的建议是尽量不使用CSS hacks。顾名思义,它们是hacks,hacks是基于不同浏览器对CSS解析不同导致的无证错误之上的。因为现在依然有很多人在使用hacks,所以我在这里提一下也无妨。除非你明确的知道在做些什么,否则我还是要建议你尽可能的使用其他方法。

针对盒模型问题最简单的CSS hack是SBMH(The simplified box model hack),案例的HTML代码和上面第一个是一样的,CSS是:

  1. #news {
  2. padding:10px;
  3. border:1px solid;
  4. width:250px;
  5. width:228px;
  6. }

所有的浏览器都会看到并理解“width:250px”,但IE 5.*/Win不会读取下面的一行,width:228px,但这行会被其余的浏览器解析。所以最后,IE 5.*/Win得到的width值是250px,其他浏览器得到的是228px。这样,在全部的浏览器中我们的新闻列表的总宽度就一致了。

总结:

我在本文中展示了如何避免或解决因CSS盒模型计算不同而导致的问题的办法,你可以根据实际情况来选择使用哪一种方法。

需要提到的是,可能在未来的某个时间,CSS3的“box-sizing”属性会给开发者选择盒模型解析方式的权利(在新发布的CSS草案中,容许开发者使用content-boxborder-box属性来选择盒模型解析的类型)。W3C的盒模型方式被称为“content-box”,IE的被称为“border-box”。因为每一种盒模型的解析方式都存在着利与弊,所以可以使用这项技术是有好处的。但说回来,对于这种属性的任何具体的落实,都会面临一些浏览器尚不支持的尴尬情况。

IE浏览器和CSS盒模型【转】的更多相关文章

  1. IE浏览器和CSS盒模型

    网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 盒子模型是CSS中一个重要的概念,理解了盒子模型才 ...

  2. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

  3. CSS盒模型

    CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...

  4. 【前端盲点】DOM事件流论证CSS盒模型是否具有厚度

    前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...

  5. [k]css盒模型

    box-sizing :  content-box || border-box || inherit 1.content-box:此值为其默认值.元素的宽度/高度(width/height)等于元素边 ...

  6. 尖刀出鞘的display常用属性及css盒模型深入研究

    一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...

  7. 7.css盒模型

    所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素 ...

  8. css盒模型和块级、行内元素深入理解

    盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...

  9. CSS盒模型和定位的类型

    此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...

随机推荐

  1. 摘录 LDAP

    1.LDAP就是 light DAP, 轻量级目录访问协议     LDAP是轻量目录访问协议(Lightweight Directory Access Protocol)的缩写     LDAP标准 ...

  2. asp.net core mvc视频A:笔记2-2.接收数据

    传参方式一:使用内置方法传递 运行结果 其他获取方法 Session对象在HttpContext中 启用Session 使用Session 运行演示 传参方式二:数据绑定 普通类型(string).自 ...

  3. Android 动画分析学习笔记

    一:分类: Android动画分三种:view动画(对场景中的对象不断做图像变换<平移,缩放,旋转,透明度>).帧动画(顺序播放一系列图像产生动画效果).属性动画(动态改变对象属性). 二 ...

  4. 详述Centos中的ftp命令的使用方法

    ftp服务器在网上较为常见,Linux ftp命令的功能是用命令的方式来控制在本地机和远程机之间传送文件,这里详细介绍Linux ftp命令的一些经常使用的命令,相信掌握了这些使用Linux 进行ft ...

  5. smarty、smarty格式化、smarty整数、smarty float、smarty各种转换方式、smarty日期转换等等 (转)

    <? require("setup.php"); define('PAGETITLE','pagtitle'); function insert_top($lid,$sid) ...

  6. Android实现夜间模式小结

    随着APP实现的功能越来越丰富, 看小说看视频上网等等, 如今不少人花在手机平板等移动终端上的时间越来越长了. 但手机和平板的屏幕并不像Kindle那类电纸书的水墨屏那么耐看, 因为自发光的屏幕特性, ...

  7. python pymysql安装

    ==================pymysql=================== 由于 MySQLdb 模块还不支持 Python3.x,所以 Python3.x 如果想连接MySQL需要安装 ...

  8. 在linux下解压缩 tar.gz文件

    解压:tar -xzvf 文件名 压缩 tar czf xx.tar.gz xxxx文件名

  9. lucas定理证明

    Lucas 定理(证明) A.B是非负整数,p是质数.AB写成p进制:A=a[n]a[n-1]...a[0],B=b[n]b[n-1]...b[0]. 则组合数C(A,B)与C(a[n],b[n])* ...

  10. UITableview刷新时界面“乱跑”现象

    Self-Sizing在iOS11下是默认开启的,Headers, footers, and cells都默认开启Self-Sizing,所有estimated 高度默认值从iOS11之前的 0 改变 ...