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

时间: 2024-11-05 17:19:53

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

IE盒模型和标准盒模型之间的差别

原文地址:https://www.cnblogs.com/shun1015/p/12411273.html

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

我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意思,第二讲不明白 标准盒模型: 我们先摆出HTML和CSS代码: 1 <div class="shoebox"> <!--此div模仿鞋子的鞋盒--> 2 <div class="shoes"> <!--此div模仿鞋子--&g

CSS盒子模型与怪异盒模型

         盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分. 盒子模型分为两种 第一种是W3c标准的盒子模型(标准盒模型) .第二种IE标准的盒子模型(怪异盒模型) 当前大部分的浏览器支持的是W3c的标准盒模型,也保留了对怪异盒模型的支持,当然IE浏览器沿用的是怪异盒模型.怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”,怪异模式主要表现在IE内核的浏览器. 一.标准盒模型与怪异盒模型的表现效果的区别之处: 1.标准

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

标准W3C盒子模型和IE盒子模型 CSS盒子模型:网页设计中CSS技术所使用的一种思维模型. CSS盒子模型组成:外边距(margin).边框(border).内边距(padding).内容(content). CSS盒子模型分为:标准W3C盒子模型,IE盒子模型,注意在两种模型中宽(width)和高(height)包括属性的不同. 标准W3C盒子模型: W3C模型中: CSS中的宽(width)=内容(content)的宽 CSS中的高(height)=内容(content)的高 eg: <d

标准盒模型与IE盒模型

1. 盒模型的组成 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用.CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容.盒模型允许我们在其它元素和周围元素边框之间的空间放置元素. 盒模型是CSS中一个重要概念,文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性.盒模型属性有: margin:外边距 padding:内边距 border:边框 content:内容 2. 标准盒模型 标

逆战!标准盒模型的理解

概述: 标准盒模型是我们网页布局的基石,从盒子的内容到盒子的外围. 分别是内容content,内填充padding,边框border,外边距margin. 盒模型具体的css属性: 1 内填充padding属性 2外边距margin Padding用法:padding主要用于控制子元素在盒子内部的位置关系. 如上图,我们可以通过padding控制盒子1在盒子2里的位置. 通过padding我们能够控制子元素在父元素盒子中的位置. padding属性四个值的时候: 上 ,右,下,左 padding

标准盒子模型和IE盒子模型

标准盒子模型 = margin + border + padding + content (content =  width | height) IE盒子模型 = margin + content (content = border + padding + width | height) 盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上图可以看到

标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)

盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上图可以看到标准 w3c 盒子模型的范围包括 margin.border.padding.content,并且 content 部分不包含其他部分. ie 盒子模型 从上图可以看到 ie 盒子模型的范围也包括 margin.border.padding.content,和标准 w3c 盒子模型不同的是

标准盒子模型和IE模型的区别【转】

盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上图可以看到标准 W3C 盒子模型的范围包括 margin.border.padding.content,并且 content 部分不包含其他部分. 从上图可以看到 IE 盒子模型的范围也包括 margin.border.padding.content,和标准 W3C 盒子模型不同的是:IE 盒子模型