标准模式与混杂模式
来源:互联网 发布:会员卡管理系统源码 编辑:程序博客网 时间:2024/06/05 17:20
DOCTYPE 的一个重要作用就是告诉浏览器,它该以何种模式呈现。
我们通过document.compatMode这个属性来检测,当前页面处于何种模式:
CSS1Compat:标准模式
BackCompat:混杂模式
那么,问题来了,什么情况下页面会处于混杂模式呢?下面是列出的几种:
(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以上未测)
1和4是比较常见的,可能还有其他情况,还没有遇到过具体的例子。。。我曾经在一篇文章看到说页面结构错误也会引发混杂模式,不知道是怎么个错误法。
第二个问题,我们区分混杂模式与严格模式的意义在哪里?
1、盒模型的解析,这应该是众所周知的问题了。混杂模式下会按照IE5.5的盒模型解析。而标准模式是按标准的盒模型解析。
2、当一个块元素div中包含的内容只有图片时,在标准模式下,不管IE还是标准,在图片底部都有3像素的空白。但在混杂模式下,标准浏览器(Chrome)中div距图片底部默认没有空白。
<style> .wp{background-color: #f00}</style><body > <div class="wp"> <img src="test01.png"> </div></body>
3、在标准模式下,如果一个单元格中包含的内容只有图片时,图片底部默认有3像素的空白。而在混杂模式下,图片底部没有空白。
(对于2、3,标准模式下的底部3像素空白,与img vertial-align的默认值baseline有关,其实大多数时候我们并不希望它保留空白,去除的方法也很简单,设置vertial-align为一个不是baseline的合法值即可。)
4、在混杂模式下,表格中的字体不会继承它祖先元素(比如body,比如包含table的div)的字体样式
<style> .wp{font-size: 48px;}</style><body > <div class="wp"> <table><tr><td>我是48号字</td></tr></table> </div></body>
5、在IE的混杂模式下,给inline元素设置高宽都有效。
<style> .inline{width: 400px;height: 200px;background-color: #edd;}</style><body > <span class="inline">我是一个span元素</span></body>
6、在混杂模式下,IE和其他浏览器对百分比宽度的解析是不一样的。如果父级是行内块或者浮动或者有定位的元素,给子元素设置百分比宽度100%时,IE的混杂会以父级的100%算(父级没有设置宽度,再往上一层),而标准浏览器是取决于内容的宽度
<style> .wp{ float: left;/* display: inline-block; position: absolute; position: relative; position: fixed;*/ } .box{width: 100%;background-color: #edd;}</style><body > <div style="width:500px;"> <div class="wp"> <div class="box"> 123 </div> </div> </div></body>
7、在混杂模式下,当我们给一个元素设百分比高度,其他浏览器(正常,inline高度无变化,inline-block和block都会按百分比),而IE是自适应到内容高度。
<style> .wp{display: inline-block;} .box{height: 100%;background-color: #edd;}</style><body > <div style="height:200px;"> <span class="wp"> <div class="box"> 123 </div> </span> </div></body>
8、overflow溢出默认值的问题。标准模式下,溢出元素是溢出可见的,超出部分的内容呈现在它的包含元素外。在混杂模式下,IE浏览器的溢出元素会自适应内容的尺寸。
<style> .wp{height: 100px;width:200px;background-color: #dee}</style><body > <div class="wp"> 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 </div></body>
- 标准模式与混杂模式
- Doctype与标准模式混杂模式
- 严格模式与混杂模式
- DOCTYPE标签与浏览器模式——标准模式、混杂模式
- 混杂模式
- 混杂模式
- 混杂模式
- DOCTYPE 严格模式与混杂模式
- DOCTYPE 严格模式与混杂模式
- DOCTYPE 严格模式与混杂模式
- Doctype & 严格模式与混杂模式
- 前端---严格模式与混杂模式
- 标准模式和混杂模式下的盒模型
- 网卡混杂模式介绍与设置
- 混杂模式和非混杂模式
- HTML的Doctype和严格模式与混杂模式
- Doctype严格模式与混杂模式的区别
- 网络嗅探混杂模式与非混杂模式的区别
- 对象流读取发生java.io.EOFException错误
- TX2刷机jetpack3.1工具包安装,不识别IP
- 每日一练20171031
- 用不到200行的Python代码实现一个区块链
- 2.1 求二进制数中1的个数
- 标准模式与混杂模式
- Your MATLAB license will expire in 05 days
- PROFILE
- Shadowsocks使用教程
- 它们才是真正的数学家 寻找自然界中的数学
- 2018年即将到来,大牛们已经开始关注的那些新的语言、框架和工具
- python常见错误:IndentationError: unexpected indent
- springboot学习笔记 --
- 常见的struts-xml 配置文件参数