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不存在或格式不 ...
随机推荐
- (转)C# Stopwatch详解
C# Stopwatch类 命名空间:System.Diagnostics; namespace System.Diagnostics { // 提供一组方法和属性,可用于准确地测量运行时间. pub ...
- HeadFirst Ruby 第十五章总结 Saving and loading data
前言 在上一章讲述了如何进行基础的操作,比如 处理 GET 请求的 get route, 再比如下载 gem 等等方面的知识.在这一章节,作者告诉我们如何储存.处理数据.整个过程分三步走: 首先,当 ...
- Jumpserver3.0部署(Centos6.x)
1.jumpserver基础环境准备[root@jumpserver ~]# yum -y install epel-release[root@jumpserver ~]# yum clean all ...
- p1459 Sorting a Three-Valued Sequence
如果将1和3都放到正确的位置,2自然也在正确的位置.那么统计1,2,3的数量num1,num2,num3.再看前num1个数有几个(设x个)不是1,那么x个1肯定要移.设前num1个数有y个3,最后n ...
- 数组方法map(映射),reduce(规约),foreach(遍历),filter(过滤)
数组方法map(映射),reduce(规约),foreach(遍历),filter(过滤) map()方法返回一个由原数组中每一个元素调用一个指定方法后返回的新数组 reduce()方法接受一个函数作 ...
- CentOS7 下源代码安装php7
安装PHP7: php-7.1.2.tar.gz:下载:wget http://cn2.php.net/get/php-7.1.2.tar.gz/from/this/mirror 安装php: # t ...
- 使用scp上传和下载文件
利用scp传输文件 1.从服务器下载文件 scp username@servername:/path/filename /tmp/local_destination 例如scp codinglog@1 ...
- phpunit——执行测试文件和测试文件中的某一个函数
phpunit --filter testDeleteFeed // 执行某一个测试函数 phpunit tests/Unit/Services/Feed/FeedLogTest.php // 执行某 ...
- spring boot(七)mybatis多数据源解决方案
说起多数据源,一般都来解决那些问题呢,主从模式或者业务比较复杂需要连接不同的分库来支持业务.我们项目是后者的模式,网上找了很多,大都是根据jpa来做多数据源解决方案,要不就是老的spring多数据源解 ...
- leetcode-algorithms-1 two sum
leetcode-algorithms-1 two sum Given an array of integers, return indices of the two numbers such tha ...