为什么包含 <!DOCTYPE html> 后 html 布局会发生变化？
没有<!DOCTYPE html>以下 html：
<style>
input { width: 400px; }
span { width: 160px; display: inline-block; }
div { width: 560px; }
</style>
<div>
<span>Slug</span><input type=text placeholder="enter-article-slug-here">
</div>
在 Chrome 和 FF 中渲染如下：
但是当包含该行时<!DOCTYPE html>，html 呈现如下：
为什么是这样？
当您声明后<!DOCTYPE html>，Chrome 和 Firefox 将从更改input为。因为文本框有一个of和一个of ，这会增加总计，在您的示例中，这足以将其换行到下一行。box-sizing: border-boxbox-sizing: content-boxinputpadding1pxborder1pxwidth4px
用户代理样式表以这种方式设置，因为如果没有<!DOCTYPE>声明，浏览器将以 Quirks 模式呈现，该模式具有与<!DOCTYPE>声明 a 时出现的正常严格模式不同的默认样式表。