总结: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用来定义一个新闻列表:

<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:

#news {
padding:10px;
border:1px solid;
width:228px;
}

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

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

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

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

#sidebar {width:250px}
#news {
padding:10px;
border:1px solid;
}

2.插入额外的标记

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

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

使用如下的CSS:

#news {width:250px}
#news div {
padding:10px;
border:1px solid;
}

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

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

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

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

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

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

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

<!--[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是:

#news {
padding:10px;
border:1px solid;
width:250px;
width:228px;
}

所有的浏览器都会看到并理解“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. 操作REDIES

    import redis r=redis.Redis(host='118.XX.XX.XXX',password='XXXXXXX9*',db=1,port=6379) # 增删改查r.set('jd ...

  2. mongoDB 索引的用法

    http://www.cnblogs.com/lipan/archive/2011/03/28/1997202.html MongoDB中的索引其实类似于关系型数据库,都是为了提高查询和排序的效率的, ...

  3. 谈谈WEB开发中的苦大难字符集问题

    http://www.lanceyan.com/tech/arch/web_luanma.html记得刚做javaweb开发的时候被这个编码问题搞得晕头转向,经常稀里糊涂的编码正常了一会编码又乱了.那 ...

  4. css进阶读书笔记

    说明:努力在十一左右,最迟双11之前掌握所有css知识要点 一.摘自<写给大家看的CSS书(第2版)>(虽然书比较旧,09年版的,但对于我这种刚入门的小菜鸟 来说,能学到的还是挺多的) 1 ...

  5. 【转】纯干货:PS高手完全自学宝典(原创文章)

    文章版权:Tommy子言  原创 一. 一切从基础开始 强大的PS虽然功能众多,但归纳起来主要有三大功能: 修图——主要包括纯图片的修饰.合成.3D合成等等: 画图——主要是指用PS来绘画.广告插画, ...

  6. android dp 和 px 的相互转换

    在开发中,可能须要动态设置控件的大小 比如为一个gridview设置宽度: LinearLayout.LayoutParams linearParams2 = (LinearLayout.Layout ...

  7. 【Oracle】使用BBED跳过丢失的归档

    在recover datafile的过程其中假设丢失了须要的归档将使得recover无法进行.使用bbed工具能够跳过丢失的归档进行recover datafile. 实验步骤例如以下: SYS@OR ...

  8. PHPthinking为全部PHP爱好者指路

    1.新手学习路线:个人觉得.自己手上应该有本參考书.像细说PHP,然后看书学习,穿插网上的一些免费视频教程(随便百度一下即可,之后我尽量整理一些给大家).当然假设自控能力差的同学.也能够參加一些培训机 ...

  9. oracle中过滤中文字符或者汉字的函数

    CREATE OR REPLACE FUNCTION GET_CHINESE(P_NAME IN VARCHAR2) RETURN VARCHAR2 IS V_CODE        VARCHAR2 ...

  10. oracle中sqlldr工具使用时注意事项

    1.命令写在一行:如,sqlldr sh/&sh_pass@&connect_string control=&ctl_file data=&dat_file log=& ...