doctype的作用，标准模式和兼容模式的区别

doctype的作用：
DOCTYPE是document type (文档类型) 的缩写。

声明位于文档的最前面，处于标签之前，它不是html标签。

主要的作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

标准模式与兼容模式的区别：
Standards—标准模式，用于呈现遵循最新标准的网页，而Quirks—兼容模式，用于呈现为传统浏览器而设计的网页。

具体的区别如下：
盒模型
在严格模式中：width是内容宽度，元素真正的宽度 = width;
在兼容模式中：width则是=width+padding+border

兼容模式下可设置百分比的高度和行内元素的高宽
在标准模式下，给span等行内元素设置wdith和height都不会生效。并且，一个元素的高度都是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的，而在兼容模式下，则会生效。

用margin:0 auto设置水平居中在IE下会失效
使用margin:0 auto在标准模式下可以使元素水平居中，但在兼容模式下却会失效。但是这个可以用text-align属性来解决的

因为在兼容模式下table中的字体属性是不能继承上层的设置的，所以white-space:pre会失效，设置图片的padding也是会失效的。

感谢大家！

doctype的作用，标准模式和兼容模式的区别相关推荐

用meta name=renderer content=webkit|ie-comp|ie-stand来切换360双核安全浏览器的极速模式和兼容模式
以下信息摘自360官方网站: 浏览模式: 极速模式.兼容模式及IE9高速模式是360浏览器显示网页时使用的三种模式: 极速模式表示极速模式兼容模式表示兼容模式 IE9IE10模式表示IE9/IE10 ...
浏览器急速模式跟兼容模式导致网站显示不同的问题
我们知道有些浏览器在浏览网站的时候可以选择急速模式跟兼容模式,不同的模式可能导致页面不一样,原因是在兼容模式的时候浏览器会根据ie版本指定显示,但是我们知道在ie的开发者工具中浏览器模式跟文档模式不一 ...
html5和极速模式,浅谈360浏览器6.0版本极速模式与兼容模式_蓝戒的博客
360浏览器升级到6.0版本后对html5实现了全面兼容,于此同时360 6.0版本浏览器提供了两种模式:1.极速模式 2.兼容模式,也就是说360浏览器为双核浏览器.浏览器最核心的部分是渲染引擎(R ...
360极速模式和兼容模式对页面的影响
360浏览器模式不同都会对页面有一些出乎意料的效果的影响: 众所周知,360浏览器有两种模式:兼容模式和极速模式.两种模式下,兼容性不同,有时会导致页面效果不尽相同,各有差异. 但模式选择具体如何定的 ...
android 兼容模式设置,天天安卓模拟器切换极速模式与兼容模式的方法
天天安卓模拟器是一款非常优秀的安卓模拟器,其为用户提供了一个完善的安卓模拟环境,帮助用户运行安卓上的游戏.应用,而且其为用户提供了诸多的辅助功能,按键操作.手柄操作.全屏.截屏等都能轻松实现,而这款软 ...
【踩坑】360安全浏览器“极速模式”和“兼容模式”，套路还是bug？
分享踩坑点: 项目中需要兼容360安全浏览器,大家当然都希望用极速模式打开网站,但是发现总是被兼容模式打开网址类似 aa.xx.dd.com 网上找了很多地方,有以下两种方法 1.<meta ...
360极速模式和兼容模式
360浏览器内核 360浏览器包含了两个内核:谷歌内核和IE内核. 极速模式代表着高速,意味着是高版本的浏览器.极速模式是以Blink(Webkit)为内核的浏览模式,Blink内核具有更高的网页浏 ...
Vue中实现检测当前是否为IE模式(极速模式还是兼容模式)
场景若依前后端分离版手把手教你本地搭建环境并运行项目: 若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面搭建起来的Vue前端项目中 ...
怎么设置ie10默认浏览模式为兼容模式
重置IE步骤: 1.利用桌面的IE打开任意一个网页,点击右上角齿轮状图标,选择"Internet 选项": 2.选择"高级"选项卡,点击"重置&quo ...

doctype的作用，标准模式和兼容模式的区别

doctype的作用，标准模式和兼容模式的区别相关推荐

最新文章

热门文章