为了与可能数量众多的网页维持兼容,现代的网页浏览器一般具有多种渲染模式:
在“标准模式”(standards mode) 页面按照 HTML 与 CSS 的定义渲染,
而在“quirks 模式”中则尝试模拟更旧的浏览器的行为。
一些浏览器(例如,那些基于 Mozilla 的 Gecko 渲染引擎的,或者 Internet Explorer 8 在 strict mode 下)
也使用一种尝试于这两者之间妥协的“近乎标准”(almost standards) 模式,
实施了一种表单元格尺寸的怪异行为,除此之外符合标准定义。
模式之间的差异和示例
1、在 quirks 模式和标准模式之间一个突出的不同是对 CSS IE盒模型缺陷的处理。
在第 6 版之前,Internet Explorer 曾经使用一种决定一个元素的盒模型的宽度和高度的,
与 CSS 规范所指定相冲突的算法,而且由于 Internet Explorer 的流行,
很多依赖于这种不正确的算法的网页被创建。而在版本 6, Internet Explorer 在标准模式下渲染时使用了 CSS 规范的算法,
而在 quirks 模式下使用先前的,不规范的算法。
2、另一个值得一提的不同点是某些行内 (inline) 元素的垂直对齐;
很多早期的浏览器对齐图片至包含它们的盒子的下边框,
虽然 CSS 的规范要求它们被对齐至盒内文本的基线。
标准模式下,基于 Gecko 的浏览器将会对齐至基线,而在 quirks 模式下它们会对齐至底部
3、此外,很多早期的浏览器对表格内部的字体样式不实施继承;
结果是,字体样式必须为整个文档作为一个整体指定一次,并且为表格再次指定一次,
尽管 CSS 规范要求字体样式被继承进表格。
如果字号使用相对单位指定,一个标准兼容的浏览器会继承基准字号,
然后应用于表格内的相对字号:
比如,一个声明了基准字号为 80% 的页面内声明表格为 80% (以保证在不正确继承字号的浏览器中有 80% 的字号)的字号将会,
在一个标准兼容的浏览器里,显示具有 64% 字号的表格。
结果是,浏览器在怪异模式典型的不对表格继承字号
接近标准模式
1、根据 CSS2 的规范维持了“传统的”表单元格的垂直方向大小调整的叫做“接近标准模式”(almost standards mode)
或者“严格模式”(strict mode) 的第三种兼容性模式,
已被在这些浏览器中实施:Safari, Opera 7.5 (和以上),
所有基于 Gecko (自 1.0.1) 的浏览器(比如 Firefox)和 Internet Explorer 8。
“接近标准”模式的渲染和“标准”模式除了一点之外,在所有细节上相匹配。
表单元格内部图片的布局采用和“quirks”模式相同的方式被处理,而不是按照标准,
这点和例如 Internet Explorer 7 (以及更早)的旧版 (en) 浏览器相当一致。
这意味着使用表格内图像片的布局在“quirks”或“接近标准”模式下的浏览器中,比起“标准”模式下,更不至于分崩离析。(以下链接详细的解释了处理问题的答案:http://article.yeeyan.org/view/300622/261564)
触发不同渲染模式
通常,浏览器基于页面中文件类型描述的存在以决定采用哪种渲染模式;
如果存在一个完整的 DOCTYPE 则浏览器将会采用标准模式,而如果它缺失则浏览器将会采用怪异模式。
例如,
1、 一个以如下 DOCTYPE 开始的网页将会触发标准模式:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2、 如下 DOCTYPE 语法上是无效的,因为它包含公共标识符关键字 PUBLIC 却没有公共标识符(指示所用 HTML 版本的名称),
也没有 HTML 文档类型定义的系统标识符 URL。这将会触发怪异模式:
<!DOCTYPE html PUBLIC>
3、 此外,一个不含任何 DOCTYPE 的网页将会以 quirks 模式渲染。
4、此外,一个不含任何 DOCTYPE 的网页将会以 quirks 模式渲染。
对此一个值得一提的例外是微软的 Internet Explorer 6 浏览器,
如果 DOCTYPE 之前有一个 XML 声明,不管是否指定完整的 DOCTYPE,它就会以 quirks 模式渲染一个页面。
因此以如下代码开始的 XHTML 页面会被 IE 6 渲染为 quirks 模式:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
5、如果 DOCTYPE 之前有任何语句,quirks 模式在任何版本的 IE 中(截至 IE 9)同样会被触发。例如,
如果一个超文本文件在 DOCTYPE 前包含一个注释或者任何标签,IE (截至 9) 会使用 quirks 模式:
<!-- This comment will put IE 6, 7, 8, and 9 in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
6、XML 声明的问题在 Internet Explorer 7 中被解决了,在此 XML 声明只是简单的被忽略。
本文参考整理自维基百科链接地址为:http://zh.wikipedia.org/wiki/%E6%80%AA%E5%BC%82%E6%A8%A1%E5%BC%8F
更多关于DOCTYPE 的请访问以下链接:
http://www.ruanyifeng.com/blog/2009/02/basic_html_template_and_css_styling_part_i.html
参阅书籍:
《精通CSS:高级WEB标准解决方案》
个人建议认真读并查维基百科。
添加有用的内容:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
相关推荐
DOCTYPE>`标签是文档类型声明,它在HTML或XHTML文档的开头,用于告诉浏览器文档遵循的HTML或XHTML规范。这个声明非常重要,因为它会影响浏览器如何解析和渲染页面内容。`<!DOCTYPE>`标签没有闭合标签,即它不需要以`...
**DOCTYPE声明**是HTML或XHTML文档中的一个重要组成部分,它位于文档的第一行,用来告诉浏览器文档应遵循哪个版本的HTML或XHTML规范。这个声明对于确保网页在不同浏览器上的一致性和正确渲染至关重要。 DOCTYPE声明...
DOCTYPE>` 是一个非常重要的声明,它的主要作用是告诉浏览器文档遵循的HTML或XHTML规范版本,以便浏览器能够正确地解析和渲染页面内容。这个声明位于HTML文档的开头,且必须在 `<html>` 标签之前。 `<!DOCTYPE html...
DOCTYPE html>`声明开始,接着是`<html>`标签,内部包含`<head>`和`<body>`两个主要部分。 2. **元素与标签**:HTML由各种元素组成,如`<p>`表示段落,`<h1>`到`<h6>`表示不同级别的标题,`<img>`插入图像,`<a>`...
DOCTYPE>声明、<html>、和等元素的作用。 6. HTML验证:介绍使用W3C验证服务检查HTML代码的正确性。 CSS3帮助文档可能包含: 1. CSS选择器:详述类选择器、ID选择器、元素选择器、伪类和伪元素等,以及更高级的选择...
这段代码是创建一个水平无缝滚动图片效果的HTML页面示例,主要涉及HTML、CSS和JavaScript三个方面的知识。以下是对这些知识点的详细说明: 1. **DOCTYPE声明**:`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
DOCTYPE>`声明、`<html>`、`<head>`和`<body>`元素,以及如何使用`<h1>`至`<h6>`定义标题、`<p>`创建段落、`<img>`插入图像、`<a>`创建链接等。这些基础知识对于构建任何网页都是至关重要的。 CSS则负责网页的样式...
HTML5 和 CSS3 面试题答案 HTML5 和 CSS3 是当前 Web 开发中两个非常重要的技术,以下是关于 HTML5 和 CSS3 的一些常见面试题答案: 优雅降级和渐进增强 优雅降级(Gracious Degradation)和渐进增强...
DOCTYPE>`声明、`<html>`根元素、`<head>`头部和`<body>`主体组成。 - HTML标签有哪些类型?分为块级元素、内联元素和行内块元素。 - 常见的HTML标签有:`<p>`(段落)、`<a>`(链接)、`<img>`(图像)、`<h1>`到...
通过以上分析,我们了解到如何构建一个基本的HTML电影网页设计,包括HTML文档结构、CSS样式设置、前端布局技术、导航栏效果、JavaScript的应用以及多媒体元素的使用。此外,还提到了常用的HTML编辑器,这对于初学者...
HTML和CSS基础知识点总结 HTML和CSS是构建网站的基础技术,掌握好基础知识点是非常重要的。本资源摘要信息将从HTML和CSS基础知识点入手,总结出一些重要的知识点,帮助读者更好地理解和应用HTML和CSS技术。 一、...
例如,Strict模式的DOCTYPE要求更严格的HTML编写规则,不允许使用表现层的HTML元素,如`<center>`或`<font>`,鼓励开发者使用CSS来控制样式。而Transitional和Frameset模式的DOCTYPE则允许一些非标准的HTML元素,但...
DOCTYPE>声明、<html>、和标签的使用。 2. HTML元素:掌握各种常用HTML元素,如文本相关元素(、<h1> - )、链接()、图像()、列表(、、)等。 3. 表单()与输入元素:理解表单的用途和不同类型的输入元素(、...
DOCTYPE html>` 2. HTML元素:`<html>` 3. 头部元素:`<head>`,包含元信息,如字符集设置(`<meta charset="UTF-8">`) 4. 正文元素:`<body>`,网页的主要内容所在 **CSS** CSS用于控制网页的样式和布局,通过...
DOCTYPE html>`声明开始,接着是`<html>`标签,其中包含`<head>`和`<body>`两个主要部分。 - **语义化标签**: 使用语义化标签如`<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`等...
### HTML与CSS学习笔记 #### 一、基础知识概述 HTML(HyperText Markup Language)与CSS(Cascading Style Sheets)是构建网页的基础技术。通过学习HTML与CSS,我们可以创建结构化且美观的网页。 - **WWW (World ...
DOCTYPE html>`:定义文档类型为HTML5。 - `<html>`:HTML文档的根元素。 - `<head>`:包含文档的元数据,如标题、样式表链接、脚本等。 - `<title>`:定义文档标题,在浏览器的标签页显示。 - `<body>`:包含页面的...
HTML(HyperText Markup Language)和CSS(Cascading Style Sheets)是网页开发的基石,它们共同构建了我们所看到的互联网页面的外观和结构。HTML用于定义内容的结构,而CSS则负责样式和布局。 HTML教程通常会涵盖...
《CSSHTML手册》是一部全面涵盖CSS(层叠样式表)和HTML(超文本标记语言)技术的手册,旨在为Web开发者提供详尽的参考指南。这部手册深入浅出地介绍了这两种语言的基础知识、高级特性以及实际应用,帮助读者在Web...
### HTML与CSS基础知识详解 #### HTML基础概览 HTML,即HyperText Markup Language,是一种用于创建网页的标准标记语言。它通过一系列预定义的元素来描述文档的结构和内容,而这些元素由“标签”(tags)构成。CSS...