总结: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. matlab 常用函数汇总

    1. 特殊变量与常数 主题词 意义 主题词 意义 ans 计算结果的变量名 computer 确定运行的计算机 eps 浮点相对精度 Inf 无穷大 I 虚数单位 inputname 输入参数名 Na ...

  2. Spring Web Flow 入门demo(三)嵌套流程与业务结合 附源代码

    上篇博客我们说Spring web Flow与业务结合的方式主要有三种,以下我们主要介绍一下第三种的应用方式 3,运行到<action-state> 元素 SpringWeb Flow 中 ...

  3. php序列化&反序列化坑

    一: 在php中如果我们统一编码是没有什么问题了,但是很多朋友会发现一个问题就是utf8和gbk编码中返回的值会有所区别: php 在utf8和gbk编码下使用serialize和unserializ ...

  4. poj3411--Paid Roads(bfs+状压)

    题目链接:id=3411">点击打开链接 题目大意:有n个点.m条有向边,经过边须要一个花费,a b c p q代表 a到b的一条道路,假设经过这条边之前经过c点,那么须要p的花费,否 ...

  5. 基于日志处理的ElasticSearch的学(gen)习(feng)

    最近学了点solr,然后有听说了ElasticSearch,就想着也学一下ElasticSearch,然后看见了ElasticSearch用于日志的收集的分析,这里就来学习一下. 百度一下Elasti ...

  6. 《TomCat与Java Web开发技术详解》(第二版) 第六章节对应CD附带的helloapp无法启动的问题解决

    首先记录一下如何解决此章节CD中附带的helloapp无法启动的问题 我用的tomcat版本是:7.0.47:为了便于控制,针对此章节的helloapp,我在tomcat/conf/Catalina/ ...

  7. ObjC消息机制

    深入浅出ObjC之消息    罗朝辉(http://blog.csdn.net/kesalin) 在入门级别的ObjC 教程中,我们常对从C++或Java 或其他面向对象语言转过来的程序员说,ObjC ...

  8. php 判断数组中是否有重复的值

    $input = array(4, "4", "3", 4, 3, "3"); $result = array_unique($input) ...

  9. windows 和 linux 上 循环读取文件名称的区别和方法

    function showGetFileName($type){ $url="/opt/mobile_system/gscdn"; //另一台服务器映射到linux过来的路径. # ...

  10. 11 Memcached 缓存雪崩现象

    一:Memcached 缓存雪崩现象(1)造成原因:一般是由某个节点失效,导致其他的节点的缓存命中率下降,缓存中缺失的数据查询,短时间内造成的数据库服务器奔溃.重启DB,短期内又被压垮,但缓存的数据增 ...