缺少HTML Doctype造成的样式问题

最新推荐文章于 2023-09-28 14:55:33 发布

转载最新推荐文章于 2023-09-28 14:55:33 发布 · 1.1k 阅读

Html+Javascript 专栏收录该内容

260 篇文章

订阅专栏

缺少Doctype文档类型声明会导致浏览器出现各种诡异的表现，如绝对定位元素偏移、非a链接元素hover效果失效等。本文介绍了不同Doctype对浏览器模式的影响，以及缺乏Doctype可能导致的具体问题。

html页面中顶部缺少Doctype会给布局和样式带很诡异的影响，从样式和位置细节找不到问题原因时，第一个就要考虑是不是缺少Doctype文档类型声明。目前比较常用的Doctype是html5类型：

<!DOCTYPE html>

这个声明使IE8、IE9处于Standards Mode标准模式，IE7、IE6处于Almost Standards Mode标准兼容模式，Firefox等现代浏览器基本是Standards Mode标准模式，详细参考这个表格。

怪癖模式、标准模式和准标准分别表示为Q、S和A。当浏览器仅有两种模式时，如果表格单元格的行高和Mozilla的标准模式表现一致时，标准模式标记为“S”，如果表格单元格的行高和Mozilla的准标准模式表现一致时，则标记为“A”。

浏览器的模式选择，有三个：

Quirks Mode, Standards Mode, Almost Standards Mode

性能 Q>A>S，其中IE的Q模式不支持css2.1，但性能最好，比其他模式快很多很多.

IE很重要，性能很重要，对用户来说，最好的模式就是Q, 对开发者而言，最好的模式是S。

在这里插入图片描述

收集一下缺少Doctype遇到过的问题现象：

绝对定位元素位置偏移，怎么调都没用
在Firefox和Chrome中，表格font-size没有继承父类元素大小，莫名其妙变大了几像素。
一开始给table元素添加：font-size: inherit; 解决了，后来发现还是没有Doctype的问题。
非a链接元素hover效果没有上去

`img`下 5个像素

解决方法有若干种,我就说一个我常用的

vertical-align: bottom;

谈一个比较细节.

有时候,不用解决方法,照样没有5个像素 ,非常完美.

因为运行在了 几乎标准的模式(Limited Quirks)

知乎上的解释:
首先，浏览器并没有所谓的"HTML 5 模式"，而是只有三种：怪异模式(Quirks)，几乎标准的模式(Limited Quirks)和标准模式(Standards)，其中几乎标准的模式和标准模式之间的唯一差异在于是否对<img>元素给定行高(line-height)和基线(baseline)。几乎标准模式中，如果<img>标签所在行没有其他的行内元素，将不指定基线(baseline)，<img>标签因此会紧贴着父元素底部。