doctype和Quirks模式
doctype:
告诉浏览器使用什么模式去渲染页面,可能会影响页面的css渲染和js代码的执行。
DTD :为了兼容旧的浏览器渲染方式,将DTD作为参数告诉浏览器使用什么模式渲染页面。始于IE6;
1、什么是混杂模式、什么是标准模式
混杂模式是一种向后兼容的解析方式,是实现IE5.5以下版本浏览器的渲染模式。不可取,无兼容性可言。
标准模式是一种要求严格的DTD,根据web标准去解析页面的模式。
近标准模式:尽可能遵循最新标准的情况下,兼容部分非标准的代码,如弃用的标签等。
2、两种模式的区别
- 盒模型的解析:混合模式盒模型的宽高=内容的宽高;标准模式盒模型的宽高=内容的宽高+padding的宽高+border的宽高。
混合模式:boxWidth = contentWidth
标准模式:boxWidth = contentWidth + padding*2 + border*2
诡异模式下(Quirks模式),IE的宽度和高度包括了padding和border。
- 当一个块元素div中包含的内容只有图片时,在标准模式下,不管IE还是标准,在图片底部都有3像素的空白。但在混杂模式下,标准浏览器(Chrome)中div距图片底部默认没有空白。
行内元素的高度:
标准模式下:行内元素设置宽高无效;怪异模式下:有效;
margin:0 auto;设置水平居中:
标准模式:会使元素水平居中;怪异模式:无效
text- align:center:
IE6/7及IE8混杂模式(quirks模式)中可以使块级元素也居中对齐。;其他浏览器中,text-align:center仅作用于行内内容上。
解决这个问题比较好的方式,就是为所有需要相对父容器居中对齐的块级元素设置“margin:0 auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持,所以还要设置父容器的 "text-align:center;"。
3、判断两种模式
document.compatMode=="CSS1Compat" //标准模式
else //混合模式
doctype和Quirks模式的更多相关文章
- 前端面霸系列(1):doctype 、Quirks Mode & Standards Mode 、document.compatMode
近几日,气压猛降,雾霾铺天盖地,眼看一场腥风血雨就要在前端江湖爆发,这场战争不仅是百度.腾讯.阿狸.搜狐网易新浪等江湖豪门抢夺人才的大战,也是诸位江湖人士重新洗牌的好时机.每年10月,江湖的波动胜过华 ...
- Quirks模式是什么?
什么是DOCTYPE: DOCTYPE,或者称为 Document Type Declaration(文档类型声明,缩写 DTD).通常情况下,DOCTYPE 位于一个 HTML 文档的最前面的 位置 ...
- 文档类型DTD,DOCTYPE和浏览器模式
出处:http://blog.csdn.net/freshlover/article/details/11616563 浏览器从服务端获取网页后会根据文档的DOCTYPE定义显示网页,如果文档正确定义 ...
- 关于Doctype、严格模式与混杂模式
<!Doctype> 文档声明,位于文档中的最前面的位置,处于<html>标签之前.此标签告知浏览器文档使用哪种HTML或XHTML规范. 用于告知浏览器以何种模式来渲染文档. ...
- 如果浏览器自动调用quirks模式打开的话
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-03-21) 则肯定你的html的声明,没有写好. 今天遇到几个,前面莫名其妙的多了个空格(在网页上看源码是多空格,复制到n ...
- DOCTYPE与浏览器模式详解(标准模式&混杂模式)
关于渲染模式: 在多年以前(IE6诞生以前),各浏览器都处于各自比较封闭的发展中(基本没有兼容性可谈).随着WEB的发展,兼容性问题的解决越来 越显得迫切,随即,各浏览器厂商发布了按照标准模式(遵循各 ...
- Quirks模式是什么?它和Standards模式有什么区别
从IE6开始,引入了Standards模式,标准模式中,浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度. 在IE6之前CSS还不够成熟,所以IE5等之前的浏览器对CSS的支持很差 ...
- JS判断doctype文档模式-document.compatMode
IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有 ...
- 前端面试题系列(1):doctype作用 标准模式与兼容模式
1.doctype作用 <!DOCTYPE>声明位于HTML文档的第一行.处于<HTML>标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCYTYPE不存在或格式不 ...
随机推荐
- slf4j/logback: logging日志的配置
slf4j/logback: logging日志的配置 import依赖: import org.slf4j.Logger;import org.slf4j.LoggerFactory;private ...
- type convert
背景# 在开发中,我们会碰到诸如String类型转换为Int等等问题,虽然处理起来简单,但是本着DRY(Don't Repeat Yourself )原则,还是有必要封装处理下: 具体代码:Maste ...
- 再谈Lasso回归 | elastic net | Ridge Regression
前文:Lasso linear model实例 | Proliferation index | 评估单细胞的增殖指数 参考:LASSO回歸在生物醫學資料中的簡單實例 - 生信技能树 Linear le ...
- Learning by doing——百日“扇贝打卡” 历程&展望
Java结课了.如果说这学期学习这门课后最明显的成果,那就是写了那么多的博客吧.而如果说本学期最有里程碑的事,那就是背了100多天单词,其中还获得了徽章! 这次想说说从中学以来一直喜欢的一门课--英语 ...
- 20165303 2017-2018-2 《Java程序设计》结对编程练习_四则运算
需求分析 能生成简单四则运算题目并判断用户回答对错. 能正确统计回答正确的概率. 能正确处理混合四则运算的优先级的问题. 能正确输出负数等结果. 能处理简单的加,减,乘,除运算. 能正确的处理有括号的 ...
- Django多表查询练习题
#一 model表:from django.db import models # Create your models here. class Teacher(models.Model): tid=m ...
- Symmetric Tree leetcode java
问题描述: Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). ...
- MongoDB存储
mongo DB #定义数据库,文件为config.py mongo_url='loclhost'//数据库地址 mongo_DB='DB_name'//数据库名称 mongo_TABEL='tabe ...
- Mac 安装md5sum等
一.安装md5sum 方案1.使用brew 安装 方案2.使用源码编译安装 源码下载地址:http://www.microbrew.org/tools/md5sha1sum/md5sha1sum-0. ...
- 微信小程序页面无法跳转
推荐网址:https://www.jianshu.com/p/e56b55334585 1.无法跳转原因分析 要跳转的路径在app.js里未注册过或路径写错 要跳转的路径是否位于TabBar中 页 ...