在怪癖模式中使用DOCTYPE元素

省略Doctype将浏览器置入怪癖模式

如果你已经设计了几个月以上的网页,你很可能意识到编写一个在所有浏览器看起来都一样的页面是困难的。 事实上,这是不可能的。 许多浏览器都写有特殊功能,只有他们可以处理。 或者他们有特殊的处理方式,与其他浏览器处理它们的方式不同。 例如:

浏览器开发者面临的问题是,他们必须创建与旧版浏览器的网页向后兼容的Web浏览器。 为了解决这个问题,浏览器制造商为浏览器创建了操作模式。这些模式由DOCTYPE元素的存在与否以及DOCTYPE调用的内容定义。

DOCTYPE切换和“怪癖模式”

如果您将以下DOCTYPE放入您的网页中:

现代浏览器(Android 1+,Chrome 1+,IE 6+,iOS 1+,Firefox 1+,Netscape 6+,Opera 6+,Safari 1+)将按照以下方式进行解读:

  1. 因为有一个正确写入的DOCTYPE,这会触发标准模式。
  2. 这是一个HTML 4.01过渡文档
  3. 由于它处于标准模式,因此大多数浏览器都会使用HTML 4.01 Transitional来呈现内容(或大部分是兼容的)

如果您将此DOCTYPE放入您的文档中:

这告诉现代浏览器您想要严格遵守DTD来显示您的HTML 4.01页面。

这些浏览器将进入“严格”或“标准”模式,并使页面符合标准。 (因此,对于这个文档,浏览器可能会完全忽略这些标签,因为FONT元素在HTML 4.01 Strict中已被弃用)。

如果完全离开DOCTYPE,浏览器会自动踢入“怪癖”模式。

下表显示了常见浏览器在使用不同的常见DOCTYPE声明时所做的操作。

微软让它变得更加艰难

Internet Explorer 6还具有如果你在DOCTYPE声明之上放置任何东西,它们将进入怪癖模式。 因此,即使DOCTYPE声明声称处于严格标准模式,这两个示例都会使IE 6进入怪异模式:

和XHTML 1.1 DOCTYPE:

另外,如果你通过IE6,那么你就拥有微软在IE8和IE9中添加的“功能”: META元素切换和网站黑名单。 事实上,这两个浏览器版本现在有多达七种(!)不同的模式:

IE 8还引入了“兼容模式”,用户可以选择将渲染模型更改回IE 7模式。 因此,即使您使用DOCTYPE和META元素设置了要设置的模式,您的页面可能被推回到不符合标准的模式。

什么是怪癖模式?

Quirks模式是为了帮助处理所有奇怪的渲染和不兼容的浏览器支持以及网页设计人员用来处理这些事情的黑客。 浏览器制造商所担心的是,如果他们将浏览器切换到完全符合规范的情况,网页设计师将被抛在后面。

通过设置DOCTYPE切换和“怪癖模式”,网页设计师可以选择他们希望浏览器呈现HTML的方式。

怪癖模式的影响

大多数浏览器在怪癖模式中使用了几种效果:

“几乎标准模式”也有所不同

如何选择DOCTYPE

我在我的文章DOCTYPE列表中进一步详细了解,但这里有一些一般的经验法则:

  1. 总是先选择标准模式。 目前您应该使用的标准是HTML5:
    除非您有避免使用HTML5 DOCTYPE的具体原因,否则这是您应该使用的。
  2. 如果您需要验证遗留元素或者出于某种原因想要避免新功能,请转至严格的HTML 4.01:
  3. 如果您在表中切片图像并且不想修复它们,请转至过渡HTML 4.01:
  4. 不要刻意以怪癖模式写页面。 始终使用DOCTYPE。 这将为您节省将来的开发时间,并且确实没有任何好处。 IE6正在迅速流行,并且通过为这款浏览器设计(这本质上是以怪癖模式进行设计的),你正在限制自己,你的读者和你的页面。 如果您必须为IE 6或7编写代码,请使用条件注释来支持它们,而不是强迫现代浏览器进入怪癖模式。

为什么使用DOCTYPE

一旦您意识到这种类型的DOCTYPE切换正在进行,您可以通过使用DOCTYPE更直接地影响您的网页,该DOCTYPE指示浏览器可以从您的页面期望什么。 另外,一旦你开始使用DOCTYPE,你将会编写更接近于有效的HTML(你仍然应该验证它)。 通过编写有效的XHTML,您鼓励浏览器制造商构建符合标准的浏览器。

浏览器版本和怪癖模式

DOCTYPE Android的

火狐
IE 8+
iOS版
Opera 7.5+
苹果浏览器
IE 6
IE 7
Opera 7
Netscape 6
没有 怪癖模式 怪癖模式 怪癖模式
HTML 3.2
怪癖模式 怪癖模式 怪癖模式
HTML 4.01
过渡 标准模式* 标准模式* 标准模式
过渡 怪癖模式 怪癖模式 怪癖模式
严格 标准模式 标准模式* 标准模式
严格 标准模式 标准模式* 标准模式
HTML5
标准模式 标准模式* 怪癖模式
*使用这种DOCTYPE,浏览器接近符合标准,但有一些问题 - 一定要测试。 这也被称为“几乎标准模式”。