• HTML


    前言

    在实现html和css标准化之前,各个浏览器对html和css的解析各有不同,甚至是同一个浏览器的不同版本渲染方式也不同(比如:IE6&IE7)。在W3C指定标准之后,浏览器既要按照标准去实现HTML和CSS的支持,又要保证能够兼容以前的非标准的旧网页,于是就有了现在所说的标准模式和兼容模式。

    浏览器如何确定渲染模式

    在编写HTML文档时,一般都会在文档的开头(html标签之前)声明文档类型:DOCTYPE。当浏览器在解析html文档时,若遇到正确的文档声明,则启用标准模式,按照标准来解析和渲染文档。而对于旧的html文档或没有DOCTYPE声明的文档,则按照怪异模式来解析文档。浏览器采用了两种模式,用以把能符合新规范的网站和老旧网站区分开。

    html5的文档声明方式:<!DOCTYPE HTML>

    如何判断这两种模式

    1、在 Firefox中,请从右键菜单选择查看页面信息,然后查看渲染模式。

    2、在 Internet Explorer中,请按下F12,然后查看文档模式。

    3、通过代码判断:

    window.top.document.compatMode
    如果语句返回为:backCompat表示怪异模式,如果为CSS1Compat则表示为标准模式。

    标准模式(strict mode)

    标准模式(严格模式),浏览器按W3C标准解析执行代码,

    怪异模式(quirks mode)

    怪异模式(混杂模式),使用浏览器自己的方式解析执行代码

    标准模式和怪异模式的区别

    1、width不同

      在标准模式中:width是内容(content)宽度,元素真正的宽度是外边距、内边距、边框宽度的和,即元素宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right。

      在怪异模式中:width则是元素的实际宽度,width = border-left-width + padding-left+ 内容(content)宽度 + padding-right + border-right-width。

    2、内联元素的尺寸

      标准模式中,给span等行内元素设置width和height都不会生效,而在怪异模式下,却会生效。

    3、可设置百分比的高度

      在标准模式下,一个元素的高度由其包含的内容content决定,如果父元素没有设置高度,子元素设置一个百分比高度是无效的。

    4、用margin : 0 auto设置水平居中

      在标准模式下可以使元素水平居中,但是在怪异模式下,无效,可以用text-align : center;来实现居中。

    5、怪异模式下设置图片的padding会失效

    6、怪异模式下table中的字体属性不能继承上层的设置

    7、元素溢出的处理

      标准模式下,overflow默认去visible,在怪异模式下,溢出会被当做扩展box来对待,溢出不会裁减,元素框自动调整大小,能够包含溢出内容。

  • 相关阅读:
    数据分析三剑客numpy pandas Matplotlib
    算法 初识
    python 爬虫二
    python 爬虫一
    python celery
    elasticsearch 学习
    ansible 基本使用
    面试题
    奇技淫巧
    【前端基础】- CSS 1-CSS选择器
  • 原文地址:https://www.cnblogs.com/sunidol/p/11582474.html
Copyright © 2020-2023  润新知