为什么在 html 上删除 doctype 会稍微改变屏幕元素上的一些内容答案

【问题标题】：Why does removing doctype on html slightly shift some on screen elements为什么在 html 上删除 doctype 会稍微改变屏幕元素上的一些内容
【发布时间】：2016-04-19 21:15:33
【问题描述】：

对于 HTML4 到 HTML5 的转换，我一直在比较我的 html4 和 html5 页面，并且发现在 doctype 之后去掉折旧的元素会导致屏幕上的元素有时会稍微移动。前任。在下面的代码中，锚标记的底部看起来像 3 像素的填充，在调试工具中没有显示，但在 HTML5 中明显向下移动。

<header>
<a href="javascript:commonSubmit('displayHomePage')"><img class="noBorder" src="images/logo.png" alt="Home" /></a>
<div id="nav">
...

此外，在一个非常大的模板生成表中，某些单元格中的某些信息偶尔会向上移动一个或 2 个像素。页面上没有发生样式更改，只需更改文档类型即可。

唯一发生的代码更改会导致移位：之前：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

之后：

<!DOCTYPE HTML>

【问题讨论】：

这可能会有所帮助 - stackoverflow.com/questions/1818587/…
第一个问题是从几乎标准模式（HTML 4.01 过渡文档类型）切换到标准模式（HTML 5 文档类型）时的典型变化，因此只需搜索几乎-标准模式。没有足够的信息来确定第二个问题，但它可能也以某种方式归结为线高计算..

标签： css html doctype

【解决方案1】：

在w3schools上发现

<!DOCTYPE> 声明必须是 HTML 文档中的第一件事，在 <html> 标记之前。

<!DOCTYPE> 声明不是 HTML 标记； 它是给网络浏览器的关于页面是用什么版本的 HTML 编写的指令。

基本上，它让浏览器知道您使用哪个 HTML 版本来正确呈现元素

之前：这是 HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

之后：这是 HTML5

<!DOCTYPE HTML>

希望这会有所帮助！

【讨论】：

我明白了。但是，仅仅更改为 HTML5 就会导致没有应用样式的事物在屏幕上的显示方式发生明显变化。在某些情况下，就像我生成的表格数据一样，当在 HTML5 和 HTML4.01 版本之间背靠背比较同一页面时，完全相同的代码在不同的位置会出现不同的显示。
这是因为 HTML5 对 HTML 代码的解释与 HTML4.01 不同
w3schools derives its name from the World Wide Web (W3), but is not affiliated with the W3C.
@TheBeeKeeper 那是因为如果你没有 doctype 声明，那么你基本上根本就没有使用标准化的 HTML 版本，并且浏览器会恢复到“怪癖模式”。有关更多信息，请搜索“怪癖模式”和/或“标准模式”。 This MDN page 很好。
@Simplicity 你能举个例子说明浏览器在 HTML5 和 HTML4 中对 HTML 的解释不同吗？根据我的经验，使用正确的 doctype 声明将始终调用 HTML5 解析器。