缺少HTML Doctype造成的样式问题

野性酷女 2021-06-26 16:06 594阅读 0赞

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

<!DOCTYPE html>

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

> 怪癖模式、标准模式和准标准分别表示为Q、S和A。当浏览器仅有两种模式时，如果表格单元格的行高和`Mozilla`的标准模式表现一致时，标准模式标记为“`S`”，如果表格单元格的行高和`Mozilla`的准标准模式表现一致时，则标记为“`A`”。
> 
> 浏览器的模式选择，有三个：
> 
> `Quirks Mode, Standards Mode, Almost Standards Mode`
> 
> 性能 `Q>A>S`，其中IE的`Q`模式不支持`css2.1`，但性能最好，比其他模式快很多很多.
> 
> IE很重要，性能很重要，对用户来说，最好的模式就是`Q`, 对开发者而言，最好的模式是`S`。

![在这里插入图片描述][20190718231409612.png]

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

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

## `img`下 5个像素 ##

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

vertical-align: bottom;

谈一个比较细节.

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

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

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

> HTML5 doctype是更现代的doctype，在浏览器中引起标准模式。 `XHTML 1.0 Transitional doctype`导致有限怪癖模式。

[Link 1]: https://hsivonen.fi/doctype/
[20190718231409612.png]: /images/20210626/2651fc037c624eab8d62dbd59bf1ee81.png