码迷,mamicode.com
首页 > 其他好文 > 详细

混杂模式与标准模式总结

时间:2017-10-01 12:17:59      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:总结   根据   严格   两种   底部   pat   htm   ie9   兼容   

1 区分模式的意义?

IE5.5引入了文档模式的概念,通过使用DOCTYPE实现模式切换,它的主要作用是告诉浏览器以哪种模式呈现,如何解析文档,也就是说两种模式主要影响CSS内容的呈现,某些情况下也会影响JavaScript的执行。

2什么是混杂模式、什么是标准模式

混杂模式是一种向后兼容的解析方式,是实现IE5.5以下版本浏览器的渲染模式。

标准模式是一种要求严格的DTD,根据web标准去解析页面的模式。

3两种模式的区别

  • 盒模型的解析:混合模式盒模型的宽高=内容的宽高;标准模式盒模型的宽高=内容的宽高+padding的宽高+border的宽高。
  • 当一个块元素div中包含的内容只有图片时,在标准模式下,不管IE还是标准,在图片底部都有3像素的空白。但在混杂模式下,标准浏览器(Chrome)中div距图片底部默认没有空白。

4如何判断两种模式

if(document.compatMode=="CSS1Compat" ) {

  console.log(‘标准模式‘);

}else {

  console.log(‘混杂模式‘);

}

5两种模式怎样触发

触发混杂模式

(1)不写<!DOCTYPE html>
(2)<!DOCTYPE html>前面加上xml声明 <?xml version="1.0" encoding="utf-8"?> (IE6)
(3)<!DOCTYPE html>和<?xml version="1.0" encoding="utf-8"?>之间加了(标签、文本、注释)(ie8以下都有,ie9以上未测)
(4)<!DOCTYPE html>前面有(标签、文本、注释)(ie8以下都有,ie9以上未测)

触发标准模式

正常的建立html即可

 

参考:http://www.cnblogs.com/qianlegeqian/p/4067635.html

混杂模式与标准模式总结

标签:总结   根据   严格   两种   底部   pat   htm   ie9   兼容   

原文地址:http://www.cnblogs.com/eugene0/p/7616856.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!