`
重庆PHP
  • 浏览: 5379 次
  • 性别: Icon_minigender_1
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

浏览器的标准模式和怪异模式

 
阅读更多
转载自重庆PHP
原文地址:http://www.php-chongqing.com/index.php/article/64
要想写出跨浏览器的CSS,必须知道浏览器解析CSS的两种模式:标准模式(strict mode)和怪异模式(quirks mode)。

所谓的标准模式是指,浏览器按W3C标准解析执行代码;怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。浏览器解析时到底使用标准模式还是怪异模式,与你网页中的DTD声明直接相关,DTD声明定义了标准文档的类型(标准模式解析)文档类型,会使浏览器使用相应的方式加载网页并显示,忽略DTD声明,将使网页进入怪异模式(quirks mode)。

<html>
    <head>
        <title>重庆PHP</title>
    </head>
    <body>
        <h3>重庆PHP,最专业的PHP社区</h3>
    </body>
</html>


如果你的网页代码不含有任何声明,那么浏览器就会采用怪异模式解析,便是如果你的网页代码含有DTD声明,浏览器就会按你所声明的标准解析。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>重庆PHP</title>
    </head>
    <body>
        <h3>重庆PHP,最专业的PHP社区</h3>
    </body>
</html>


上面的代码,浏览器会按HTML 4.01的标准进行解析。

到底标准模式和怪异模式有什么不同呢?在我之前的文章《IE到底认不认识!important声明》中已经说过,标准模式中

IE6不认识!important声明,IE7、IE8、Firefox、Chrome等浏览器认识;而在怪异模式中,IE6/7/8都不认识!important声明,这只是区别的一种,还有很多其它区别。所以,要想写出跨浏览器的CSS,你必须采用标准模式。好像太绝对了,呵呵。好吧,要想写出跨浏览器CSS,你最好采用标准模式。

到底都有哪些声明呢?哪种声明更好呢?我们建议你使用XHTML 1.0最严格模式,从一开始我们就应该严格的要求自己

,具体声明如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

如果你接手的是一个遗留网页,最初并没有DTD声明,并且使用了很多在XHTML中已经废除的标签,那么,我们建议你使用XHTML兼容模式,声明如下:
<!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">

使用标准模式来声明网页,是写出跨浏览器CSS的基础,你了解了吗?希望对你有用。
分享到:
评论

相关推荐

    fee-interview-questions:前端面试题库

    浏览器标准模式和怪异模式之间的区别是什么? 标准模式会以标准模式解释页面,怪癖模式则以兼容模式解释老的页面。 说说HTML5有那些新特性,移除了哪些元素? HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置...

    浅谈浏览器兼容性模式[按F12便知]

    面试官:请你谈谈标准(Standards)模式、怪异(Quirks)模式、准标准(Almost Standards)模式,当你打开IE9时候会看见,浏览器模式,文档模式,兼容性视图,这些又是什么? 好吧,一点点来:先明白一个词DTD(文档类型...

    CSS基础知识

    资源名称:CSS基础知识...为了实现这一点,他们创建了两种表现形式:标准模式和怪异模式(quirks mode)。怪异模式通常模拟老式浏览器(比如IE6,在标准模式中 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。

    js判断浏览器是否支持严格模式的方法

    “严格模式”体现了Javascript更合理、更安全、更严谨的发展方向,包括IE 10在内的主流浏览器,都已经支持它,许多大项目已经开始全面拥抱它。 另一方面,同样的代码,在”严格模式”中,可能会有不一样的运行结果...

    javascript严格模式详解(含严格模式与非严格模式的区别)

    有些严格模式的特性在不同浏览器的支持情况不同,需要注意兼容问题 严格模式与非严格模式的区别 1.禁用with语法,使用将报错 因为解析with语法时作用域的情况会非常复杂,严重影响代码的解析与运行速度 function...

    quirksmode

    浏览器Quirksmode(怪异模式)与CSS1compat.docx

    百度地图毕业设计源码-Front-End-interview-questions:整理收集常见前端面试问题及一些知识点

    决定使用何种协议来解析,以及切换浏览器模式。 浏览器模式: 3.1 标准模式、3.2 混杂模式。 3.1 标准模式 标准模式(standards mode):浏览器根据W3C标准来渲染页面。 3.2 混杂模式 混杂模式(quirks mode):...

    高级前端工程师面试题整理1

    4. 实现不使用 border 画出1px高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果 2. CSS3有哪些新特性 5. canvas 如何绘制

    html doctype 作用介绍

    文档模式主要有以下两个作用: 1、告诉浏览器使用什么样的...BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式) CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])

    跟我学习javascript的严格模式

    一、概述 除了正常运行模式,ECMAscript 5添加了第二种运行...“严格模式”体现了Javascript更合理、更安全、更严谨的发展方向,包括IE 10在内的主流浏览器,都已经支持它,许多大项目已经开始全面拥抱它。 另一方面

    前端面试《综合问题版》

    怪异模式和标准模式? less 、 sass 、 postcss 、 prefix 层叠优先级 圣杯、双⻜燕布局 float 清除浮动 flex 布局、 grid 布局、 table 布局 css 以及中轴旋转、动画变换 绘制三⻆形、矩形、菱形、梯形(奇巧淫技,...

    JavaScript严格模式详解

    一、概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:”严格模式”(strict mode)。顾名思义,这种模式使得...“严格模式”体现了Javascript更合理、更安全、更严谨的发展方向,包括IE 10在内的主流浏览器

    feather-gb:只是用Rust编写的另一个GameBoy模拟器

    羽毛GB 只是另一个用Rust编写的GameBoy模拟器 :crab:...桌面标准-SDL2渲染的WIP (应该是跨平台的,但我仅测试了MacOS) 调试器-由egui渲染(使用glium作为后端)浏览器一般基于React&TypeScript 标准-具有某些样式

    IBM WebSphere Portal门户开发笔记01

    5、JS 计算网页内容的宽与高 (浏览器的标准模式与怪异模式) 237 6、JS设置与查看网页的解析模式(值) 249 7、JS判断对象是否已经存在 249 8、CSS设置网页在IE下为灰色显示 250 9、HTML A链接CSS样式 251 10、CSS...

    为什么使用DOCTYPE HTML

    你知道如果没有它,浏览器在渲染页面的时候会使用怪异模式;你知道各个浏览器在怪异模式下对各个元素渲染是有差异的。所以你会写像这样的doctype: 复制代码代码如下: &lt;!DOCTYPE html PUBLIC “-//W3C//DTD ...

    CSS3 box-sizing属性详解

     3、border-box,border和padding计算入width之内,其实就是怪异模式了~ 注意: ie8+浏览器支持content-box和border-box; ff则支持全部三个值。 使用时: -webkit-box-sizing: 100px; // for ios-safari, and

    排序:使用ReactJS进行各种常见排序算法的可视化工具

    我还了解了调试时JavaScript的一些怪异之处。 通过访问应用程序 该项目是通过。 可用脚本 在项目目录中,可以运行: npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑,页面将重新加载。...

Global site tag (gtag.js) - Google Analytics