关于Doctype、严格模式与混杂模式
<!Doctype> 文档声明,位于文档中的最前面的位置,处于<html>标签之前。此标签告知浏览器文档使用哪种HTML或XHTML规范。
用于告知浏览器以何种模式来渲染文档。
严格模式:页面排版和js解析是以该浏览器支持的最高标准(W3C)来执行。
混杂模式:不严格按照标准模式执行,主要用以兼容旧的浏览器,向后兼容。模拟老式浏览器的行为以防止老站点无法工作。说的透明点就是可以实现IE5.5及以下版本的浏览器的渲染模式。
Doctype不存在或格式不正确会导致文档以混杂模式呈现。
那么问题来了,严格模式和混杂模式在样式上有什么不同之处?
区别:总体会有布局、样式解析和脚本解析三方面的区别。
1、盒模型:在W3C标准中,如果设置一个元素的宽度和高度,值得是元素内容的宽度和高度,而在Quirks模式下,IE的宽度和高度还包含了padding和border。
2、设置行内元素的宽高:在标准模式下,给<span>等行内元素设置width和height都不会生效,而在quirks模式下,则会生效。
3、设置百分比的高度:在标准模式下,一个元素的高度尤其包含的内容决定,如果父元素没有设置高度,子元素设置一个百分比的高度是无效的。
4、margin:0 auto设置水平居中:使用margin:0 auto在标准模式下可以使元素水平居中,但在quirks模式下却会失效。解决办法:用text-align属性:
body{text-align:center;}
#content{text-align:left;}
5、quirks模式下设置图片的padding会失效
6、quirks模式下Table中的字体属性不能继承上层的设置
7、quirks模式下white-space:pre(保留空白)会失效
那么问题来了,white-space可能的值:
normal 默认。空白会被浏览器忽略
pre 空白会被刘看齐保留。其行为方式类似HTML中的<pre>标签
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到<br>标签为止
pre-wrap保留空白符序列,但是正常的进行换行
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承white-space属性的值。
关于Doctype、严格模式与混杂模式的更多相关文章
- Doctype 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
Doctype:(Document Type)文档类型,它位于文档中最前面的位置,处于标签之前.如果你想制作符合标准的页面,一个必不可少的关键组成部分就是DOCTYPE的声明.确定了正确的Doctyp ...
- 浅谈!DOCTYPE声明的作用?严格模式与混杂模式的区别?
!DOCTYPE的作用: DOCTYPE是Document Type(文档类型)的缩写,<!DOCTYPE>声明必须是html文档的第一行,位于<html>标签之前.<! ...
- HTML:关于HTML的Doctype和严格模式与混杂模式
DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档. Doctype可声明三种DTD类型,分别表示严格 ...
- 文档声明(Doctype)和<!Doctype html>有何作用? 严格模式与混杂模式如何区分?它们有何意义?
文档声明的作用: 文档声明是为了告诉浏览器,当前HTML文档使用什么版本的HTML来写的,这样浏览器才能按照声明的版本来正确的解析. <!doctype html> 的作用就是让浏览器进入 ...
- web基础(四)严格模式与混杂模式
web基础(四)严格模式与混杂模式 一.介绍 DOCTYPE 标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档.DO ...
- DOCTYPE声明的作用是什么?严格模式与混杂模式如何区分?
HTML语言已经存在太久了,目前必然会有一些不同版本的文档存在,为了能够让浏览器清楚你的文档的版本类型和风格,需要在文档的起始用DOCTYPE声明制定当前文档的版本和风格.如果在网页中提供了版本信息, ...
- Doctype 文档类型,标准模式,混杂模式
HTML4.01和XHTML1.0 基于 SGML,支持DTD声明,HTML5不是,但是需要 doctype 来规范浏览器的行为. 标准模式是指,DTD声明定义了标准文档的类型后,浏览器按W3C标准解 ...
- Doctype作用?严格模式与混杂模式如何区分?它们有何意义?
怪异模式和严格模式(译注:一般称为标准模式:Standards Mode,下文中的严格模式都可以理解为标准模式)是浏览器解析CSS时的两种‘模式’.这篇文章将简单阐述这两种模式之间的差异. 译注:一个 ...
- DOCTYPE与浏览器模式详解(标准模式&混杂模式)
关于渲染模式: 在多年以前(IE6诞生以前),各浏览器都处于各自比较封闭的发展中(基本没有兼容性可谈).随着WEB的发展,兼容性问题的解决越来 越显得迫切,随即,各浏览器厂商发布了按照标准模式(遵循各 ...
随机推荐
- 一键分享到QQ空间、QQ好友、新浪微博、微信代码
通过qq空间.qq聊天.新浪微博和微信二维码分享平台提供的接口,实现把网页中对应的图片.标题.描述的信息参数用javascript获取后传进接口中,实现一键分享. 使用到的接口(测试时需要登录,网址和 ...
- vue 轮播插件使用
<template> <div> <Swiper ref="swiper" v-if="list.length > 0" : ...
- 专题训练——[kuangbin带你飞]最短路练习
最短路练习 0. Til the Cows Come Home POJ - 2387 完美的模板题 //#include<Windows.h> #include<iostream& ...
- uva 327 - Evaluating Simple C Expressions
Evaluating Simple C Expressions The task in this problem is to evaluate a sequence of simple C exp ...
- list & dictionary
list不能直接进行对应,dictionary可以 list用[],dictionary用{}
- vscode调试nodejs
1.安装nodejs 2.安装vscode 3.vscode安装debugger for chrome插件 4.新建nodejs-test文件夹,新建server.js空白文件,添加内容: var h ...
- nativeLibraryDirectories=[/data/app/com.lukouapp-1/lib/arm64, /vendor/lib64, /system/lib64]]] couldn't find "libxxxx.so
一开始我遇到的问题是,如果手机有SD卡槽,则不管有没有插卡,都会闪退,打日记后发现是找不到so文件.报错日记如下: nativeLibraryDirectories=[/data/app/com.lu ...
- sql 日期问题从周转换到日期
alter procedure p_date@year int=2005, --年份@week int=33, --第几周@firstday datetime =null output, ...
- 游走(bzoj 3143)
Description 一个无向连通图,顶点从1编号到N,边从1编号到M. 小Z在该图上进行随机游走,初始时小Z在1号顶点,每一步小Z以相等的概率随机选 择当前顶点的某条边,沿着这条边走到下一个顶点, ...
- Linux下汇编语言学习笔记61 ---
这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...