zoukankan      html  css  js  c++  java
  • IE盒模型和标准盒模型

    标准盒模型和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

  • 相关阅读:
    hdu4331 Image Recognition 就暴力啊。。啊。。
    [置顶] ASP.Net中服务器控件的生命周期
    Windows下通过脚本快速修改IP地址
    java对象转json应clone,避免生成json串有问题
    Oracle表空间常用操作
    redhat5安装jdk6、eclipse和tomcat6
    Oracle 表的常见操作
    一道来自华为的C机试题目
    [置顶] 获取系统时间的方法--linux
    html5 命运之轮生产
  • 原文地址:https://www.cnblogs.com/Walker-lyl/p/7454213.html
Copyright © 2011-2022 走看看