• 诡异模式:果然很诡异


    很多老的页面都没有doctype声明,浏览器对于那些没有doctype的网页是采用quirks mode解析的。通过quirks mode我们就可以解析早期的页面,防止老(90年代)的页面破相。不同的浏览器有不同的quirks模式,在ie6,7,8里,quirks模式可以有效的回到ie5.5的解析模式。但是在其他浏览器中,quirks模式和标准模式差别并不大。
     
    简单的说,如果在ie6里启动了quirks模式,那么解析的时候会按照ie5.5的渲染模式展现
     
    昨天有一个朋友给了我一个页面,说是只有在IE下会出现水平滚动条,我重新写了点简单的代码测试,发现设置了margin的0 auto可是页面不居中,最后我看了一下,页面的doctype用的是<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    再查下不同浏览器的解析模式(浏览器渲染模式点这里),果然所有的浏览器解析这个doctype时都是以诡异模式解析的
     
    好了,先看下
    Quirks 模式和standerds模式的区别:
    盒模型
    在w3c标准中,如果设置一个元素的宽高,那么指的是元素的宽度和高度值,但是在quirks模式下,宽高显示的是实际所占用的宽高,也就是加上了padding和border(应该还有margin)的值。
     
    可以设置行内元素的高度
    在standerds模式下,对行内元素设置宽高是无效的,但是在quirks模式下是生效的。
     
    可以设置百分比的高度
    在standerds模式下,一个元素的高度是由其包含的内容来决定,如果父级元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的。但是quirks模式下是有效的(这个我没试过)
     
    在quirks模式下margin:0 auto是不能实现水平居中的(好吧,这个就是上面的问题所在了)
     
    给图片设置padding会失效
     
    table中的字体属性不能继承
     
    所以,文档的doctype是很重要的,它决定了浏览器的渲染模式,这些问题还是要注意了,我在dreamweaver里也经常新建的时候点错doctype,所以现在经常都直接复制doctype过来了,当然只要注意点也没什么问题
  • 相关阅读:
    02.ZooKeeper的Java客户端使用
    01.ZooKeeper安装和介绍
    02.Elasticsearch入门
    01.Elasticsearch安装
    01.ActiveMQ安装部署
    springboot项目打包时提示“程序包xxx不存在,找不到符号”
    Eclipse提交git代码 报错authentication not supported
    Eclipse提交git代码 报错authentication not supported
    utf8mb4_general_ci报错解决方案
    mysql开启远程访问
  • 原文地址:https://www.cnblogs.com/rhinemetal/p/2568461.html
Copyright © 2020-2023  润新知