标准盒模型和ie盒模型(怪异盒模型)

  1. w3c标准盒模型

    • width和height不包括padding和border
  2. ie盒模型

    • width和height包含padding和border
  • ie8以上都是w3c标准盒模型    ie5极其以下都是ie盒子模型,ie6、ie7、ie8在混杂模式下ie盒模型,在标准模式下是w3c标准盒模型
    (注意:ie6在混杂模式下一定是Ie盒模型,而ie7、ie8在混杂模式下不一定是ie盒模型)
  • css3中的box-sizing

    • content-box w3c标准盒模型

    • boder-box IE盒模型 / 怪异盒模型

混杂模式和标准模式

在多年以前(IE6诞生以前),各浏览器都处于各自比较封闭的发展中(基本没有兼容性可谈)。随着WEB的发展,兼容性问题的解决越来

越显得迫切,随即,各浏览器厂商发布了按照标准模式(遵循各厂商制定的统一标准)工作的浏览器,比如IE6就是其中之一。但是考虑到以

前建设的网站并不支持标准模式,所以各浏览器在加入标准模式的同时也保留了混杂模式(即以前那种未按照统一标准工作的模式,也叫怪

异模式)。经过多年的发展,后来又出现了近似标准模式(在一种模式中同时融入标准模式和部分混杂模式的特性,也称为接近标准模式、

准标准模式、最有限混杂模式)和超级标准模式近似标准模式、标准模式、超级标准模式三者也共同被称作标准模式)。因此,浏览器的

模式可以分为两类:标准模式和混杂模式,其中,标准模式又可更严格的分为近似标准模式、标准模式、超级标准模式。

  1. 混杂模式会让IE的行为与(包含非标准特性的)IE5相同
    而标准模式会让IE的行为贴近W3C标准
 1.<!DOCTYPE html>
2.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  1. 标准模式可以通过doctype 和 严格型(strict)声明来开启。
    而混杂模式可以通过过渡性(transitional)和框架集型(frameset)声明来开启

IE注释判断语句

IE特有功能,通过HTML注释中的条件语句然不同的IE版本识别注释中的内容,这对IE的hacks很有帮助。

1)<!--[if lt IE 7]> : 小于 IE7 的版本 ( Less than );

2)<!--[if lte IE 7]> : 小于或等于 IE7 的版本 ( Less than or equal );

3)<!--[if gt IE 7]> : 大于 IE7 的版本 ( Greater than );

4)<!--[if gte IE 7]> : 大于或等于 IE7 的版本 ( Greater than or equal );

5)<!--[if !IE 7]> : 不等于 IE7 的版本 ( Not );

6)<!--[if !IE]> :不等于 IE 的版本 ( equal );

   <!--[if IE 6]>
Only recognized in IE7;
只能被IE7识别
此处可以填样式
<![endif]>

--------------------------------------end

IE盒模型和标准盒模型的更多相关文章

  1. 怪异盒模型和标准盒模型--CSS

    一,原理 css 属性:Box Moel分为两种:W3C标准和IE标准盒子模型. 大多数浏览器采用W3C标准模型,而IE中采用Microsoft自己的标准. 怪异模式是“部分浏览器在支持W3C标准的同 ...

  2. boxsizing属性 IE盒模型和标准盒模型

    CSS3有一个非常有用但应用不广泛的属性: box-sizing: content-box | border-box | inherit content-box,默认属性,遵从标准盒模型. borde ...

  3. padding标准盒模型和怪异盒子模型

    我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...

  4. 标准盒模型与IE盒模型之间的转换

    首先上图,这两张很明显可以看出IE盒模型和标准盒模型之间的差别. 当然今天不是去细细追究两种模型具体是怎么去计算布局的,那个很多文章已经已经有过了,不再重复.以前刚开始学习盒模型的时候,就学到的是IE ...

  5. w3c标准盒模型与IE传统模型的区别

    一.盒子模型(box model) 在HTML文档中的每个元素被描绘为矩形盒子.确定其大小,属性——比如颜色.背景.边框,及其位置是渲染引擎的目标. CSS下这些矩形盒子由标准盒模型描述.这个模型描述 ...

  6. CSS盒子模型与怪异盒模型

             盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分. 盒子模型分为两种 第一种是W3c标准的盒子模型(标准盒模型) .第二种IE标准 ...

  7. 标准W3C盒子模型和IE盒子模型

    标准W3C盒子模型和IE盒子模型   CSS盒子模型:网页设计中CSS技术所使用的一种思维模型. CSS盒子模型组成:外边距(margin).边框(border).内边距(padding).内容(co ...

  8. CSS3标准盒模型还是IE怪异模型box-sizing属性的应用设置

    在一个文档中,每个元素都被表示为一个矩形的盒子.盒子模型具有4个属性['外边距(margin)','边框(border)','内边距(padding)','内容(content)']. 我们要设置某个 ...

  9. 理解标准盒模型和怪异模式&box-sizing属性

    盒子模型 主要有两种,w3c标准盒模型,IE下的怪异盒模型,其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题) DTD规范 盒模型分为:标准w3c盒模型.IE盒模型.以及css中的伸缩盒模 ...

随机推荐

  1. 聚类分析算法及SAS实现

    聚类分析是用户细分里面最为重要的工具,而用户细分则是整个精准营销里面的基础. 聚类分析方法分为: 层次法:可分为凝聚式和分列式,适用于观测数比较少的情形 1.凝聚式:将每个观测都归为一类,然后每次都将 ...

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

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

  3. C# 中 finally 的用法

    当一个异常抛出时,它会改变程序的执行流程.因此不能保证一个语句结束后,它后面的语句一定会执行,在 C# 中这个问题可以用 finally 解决. 为了确保一个语句总是能执行(不管是否抛出异常),需要将 ...

  4. Linux下, Eclipse C/C++ IDE下编辑好C/C++源程序之后要先保存!!!否则,就会……

    注意:Linux下, Eclipse C/C++ IDE下编辑好C/C++源程序之后要先保存! ! ! 然后Project-->Build All/Build Project,再点绿箭头执行.否 ...

  5. Google 商店

    Google 商店地址:https://store.google.com/

  6. VB.NET小结

    在满头困惑与不断的摸索中.NET视频终究是看完了,感觉这是迄今为止的视频材料中最令人头疼的一个,漫天的繁体字和标准的台湾术语,真是让人欲罢不能.只是看着看着也就慢慢习惯了,大概可以理解老师在讲什么,可 ...

  7. Atitit.远程接口 监控与木马   常用的api 标准化v2 q216

    Atitit.远程接口 监控与木马   常用的api 标准化v2 q216 1. 木马与远程接口 监控的常用的api2 1.1. 文件复制2 1.2. 屏幕定时截图2 1.3. 邮件发送2 1.4.  ...

  8. HTML5 2D平台游戏开发#11斜坡物理

    在游戏中会经常遇到斜坡地形,比如众所周知的魂斗罗,角色可以在坡上移动和跳跃: 斜坡在2D游戏中很常见,处理起来也较为棘手.最初我打算用分离轴定律来实现,在建立了一个物理模型之后: 发现上坡时没什么问题 ...

  9. linux flush memcache缓存

    telnet localhost 11211 flush_all  memcached Telnet Interface Command Description Example get Reads a ...

  10. 查看tcp各个连接状态的数量

    4. 查看tcp各个连接状态的数量 下面对的 netstat -tan|awk '$1~/tcp/{aa[$NF]++}END{for (h in aa)print h,aa[h]}' SYN_SEN ...