博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Doctype文档声明的严格模式和混杂模式,如何触发这两种模式,区分它们有何意义?...
阅读量:5811 次
发布时间:2019-06-18

本文共 1695 字,大约阅读时间需要 5 分钟。

(1)如何触发两种模式:

加入xml头部声明,可以触发IE浏览器的Quirks mode,触发之后,浏览器解析方式就和IE5.5一样,拥有IE5.5一样的bug和其他问题,行为(Javascript)也是如此。
          
(2)IE6的触发:在XHTML的DOCTYPE前加入XML声明,
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3)IE7的触发:在XML声明和XHTML的DOCTYPE之间,加入HTML注释 
<?xml version="1.0" encoding="utf-8"?>
<!-- ... and keep IE7 in quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(4)IE6和IE7都可以触发的:在HTML4.01的DOCTYPE文档头部,加入HTML注释
<!-- quirks mode -->  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
(5)在页面顶部加 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ,将触发“怪异模式”
(6)没有使用DTD声明或者使用HTML4以下(不包括HTML4)的DTD声明时,基本上所有的浏览器都是使用quirks mode呈现
如何判定现在是标准模式,还是怪异模式:
方法如下,执行代码
alert(window.top.document.compatMode) ;
//BackCompat  表示怪异模式
//CSS1Compat  表示标准模式
意义:
各个浏览器的混杂模式,基本就是各个浏览器的私有模式,不相互兼容。
所以,除非是为了兼容的问题,比如你不想修改很久很久以前做的IE ONLY的网页,否则,刻意触发混杂模式没有任何意义。
区分是标准模式还是混合模式,有其重要的意义所在,那就是确定页面解析时,使用的是“标准盒Box模型“,还是使用“传统Box模型“。
在mozilla firefox 和 IE中的BOX模型
其解释中,因不一致导致相差2px的宽度,其解决方法:
div{
    margin:30px!important;
    margin:28px;
}
注意这两个margin的顺序一定不能写反,!important这个属性IE6不能识别,但IE7能识别,且IE8属于标准浏览器类型;故也支持。别的浏览器可以识别。所以在IE6下其实解释成这样:
div{
  margin:30px;
  margin:28px
}
重复定义的话按照最后一个来执行。
IE5 和IE6的BOX解释不一致
IE5下div{width:300px;margin:0 10px 0 10px;}
div的宽度会被解释为300px-10px(右填充)-10px(左填充),最终div的宽度为280px,
而在IE6和其他浏览器上,div宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。
这时我们可以做如下修改
div{
    width:300px!important; 
    width /**/:340px;
    margin:0 10px 0 10px
}

关于这个/**/是什么?也不太明白,只知道IE5和firefox都支持,但IE6不支持。

转载于:https://www.cnblogs.com/qiuna/p/4148805.html

你可能感兴趣的文章
Binary Search Tree Iterator leetcode
查看>>
Oracle性能优化--DBMS_PROFILER
查看>>
uva-317-找规律
查看>>
Event事件的兼容性(转)
查看>>
我的2014-相对奢侈的生活
查看>>
zoj 2412 dfs 求连通分量的个数
查看>>
【转】inittab文件
查看>>
Java设计模式
查看>>
一文读懂 AOP | 你想要的最全面 AOP 方法探讨
查看>>
ndk制作so库,ndk-build不是内部或外部命令。。。的错误
查看>>
Spring Cloud 微服务分布式链路跟踪 Sleuth 与 Zipkin
查看>>
ORM数据库框架 SQLite 常用数据库框架比较 MD
查看>>
Razor 模板引擎的使用
查看>>
tf.nn.sigmoid_cross_entropy_with_logits
查看>>
文件中的类都不能进行设计,因此未能为该文件显示设计器。设计器检查出文件中有以下类: FormMain --- 未能加载基类...
查看>>
使用SQL语句如何实现条件判断
查看>>
大数据的十大热门趋势
查看>>
EMQ配置
查看>>
解压缩软件中如何提前设置文件存储名称相冲突的解决方法
查看>>
(原創) 如何判斷一個字串是否存在於另外一個字串? (C/C++) (C)
查看>>