• ie和firefox 盒子模型区别以及quirks mode(怪异模式)和strict mode(严格格式)


    以前一直没有注意过这个问题,这次是因为公司的项目把html的声明

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    给注视掉了,才出现了这个问题,如果有这个声明浏览器都是按照w3c的标准来解析元素布局模式的。公司因为有特殊的需求,自定义了很多东西,不想浏览器严格按照标准解析,就把这个给注视掉了。正因为这样,让我摸不着头脑怎么回事,不同浏览器里明明stlye都一样,div元素大小却不一样。现在知道怎么回事了。

    IE和W3C分别有一套盒子模型,Firefox中采用W3C标准模型,而IE中则采用Microsoft自己的标准,

    看下面2个示例图:

    盒子模型(BOX <wbr>Model) <wbr>在IE和Firefox中的区别

    盒子模型(BOX <wbr>Model) <wbr>在IE和Firefox中的区别

    很明显,W3C标准认为,盒子的宽度仅仅是内容的宽度,而IE标准认为“内容+padding+border”才是盒子的宽度。

    IE和W3C分别有一套盒子模型,Firefox中采用W3C标准模型,而IE中则采用Microsoft自己的标准,

    看下面2个示例图:

    盒子模型(BOX <wbr>Model) <wbr>在IE和Firefox中的区别

    盒子模型(BOX <wbr>Model) <wbr>在IE和Firefox中的区别

    很明显,W3C标准认为,盒子的宽度仅仅是内容的宽度,而IE标准认为“内容+padding+border”才是盒子的宽度

    我们可以将用CSS Hack 来区分2个标准:(具体参见css Hack 说明,利用不同浏览器识别css特殊符号能力不同来定义css)
    另外,如果在定义HTML使用了<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

    <html xmlns=”http://www.w3.org/1999/xhtml”> 那么就不会有这个问题,所有的Box模型都将使用W3C标准,不管是在IE中还是其他浏览器中。

     -----------------------------------------------------

    浏览器的两种模式quirks mode(怪异模式)和strict mode(严格格式)

    1、quirks mode和strict mode是浏览器解析css的两种模式,或者可以称之为解析方法。目前正在使用的浏览器这两种模式都支持 。

    2、历史原因。

    当早期的浏览器Netscape 4和Explorer 4对css进行解析时,并未遵守W3C标准,这时的解析方式就被我们称之为quirks mode(怪异模式),但随着W3C的标准越来越重要,众多的浏览器开始依照W3C标准解析CSS,仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式).

    3、后来的浏览器虽然支持strict mode,但众多浏览器并未放弃支持quirks mode。

    一个重要的原因就是为了之前大量在quirks mode下开发的网页能够得到正确的显示。所以,这些支持两种模式的浏览器当拿到一张网页时,所做的一个前期工作就是判断采取何种方式进行解析(判断条件后面会说)。

    4、浏览器如何判断何用哪种方式解析CSS?

    解决方案就是采用doctype声明,大多数浏览器采用下面的这些判断规则

    •     浏览器要使老旧的网页正常工作,但这部分网页是没有doctype声明的,所以浏览器对没有doctype声明的网页采用quirks mode解析。
    •     对于拥有doctype声明的网页,什么浏览器采用何种模式解析,这里有一张详细列表可参考:http://hsivonen.iki.fi/doctype/
    •     对于拥有doctype声明的网页,这里有几条简单的规则可用于判断:

    对于那些浏览器不能识别的doctype声明,浏览器采用strict mode解析

    在doctype声明中,没有使用DTD声明或者使用HTML4以下(不包括HTML4)的DTD声明时,基本所有的浏览器都是使用quirks mode呈现,其他的则使用strict mode解析。

    可以这么说,在现有有doctype声明的网页,绝大多数是采用strict mode进行解析的。

    quirks mode和strict mode最大的不同就是提现在对盒模式的解释上,上面已经提到了就不重复了。

    5、在js中如何判断当前浏览器正在以何种方式解析? 
        document对象有个属性compatMode ,它有两个值:
            BackCompat    对应quirks mode
            CSS1Compat    对应strict mode

    就是没有注意这个,发现ie打开项目的网页都是默认用quirks模式,导致页面乱掉,加上声明后就好了。之前还在根据不同浏览器在js里,在css来做判断进行样式的调整,废了不少力,现在把这个加上就规范得多了,不用弄得那么复杂,以后产品开发人员自定义开发的时候也简单了。

  • 相关阅读:
    eclipse中如何修改编码格式
    如何让Div中的Table居中
    EL表达式和标准标签库
    jQuery获取option的一些常用方法
    第三十五章——过滤器和监听器
    第三十四章——java web的注册登录和留言板的制作
    关于九大内置对象的补充——application
    第三十三章——javaweb初识和九大内置对象
    学习记录
    从 HTTP 到 HTTPS 再到 HSTS
  • 原文地址:https://www.cnblogs.com/onlywujun/p/3082446.html
Copyright © 2020-2023  润新知