为什么这个具有内联块跨度的 div 的行为与正常情况不同答案

【问题标题】：Why is this div with an inline-block span behaving differently than normal为什么这个具有内联块跨度的 div 的行为与正常情况不同
【发布时间】：2016-01-17 03:05:54
【问题描述】：

鉴于这个小提琴https://jsfiddle.net/2pct6pbv/2/，为什么下面的 div/span（屏幕截图）的行为方式不同 - 这意味着 div 的高度应该是 24px（行高 * 正文的字体大小），而跨度应该有 0px 高度（检查屏幕截图 #2，右下角 chrome 检查器）

编辑：我添加了最后一个屏幕截图，基本上所有内容都被简化为类似于 jsfiddle。我不知道还有什么可以尝试重现该问题。

body {
  line-height: 1.5;
  font-size: 16px;
}

div {
  background-color: red;
}

span {
  display: inline-block;
}

我尝试了一切以使其行为相同，但它似乎不起作用。在另一个页面中，使用完全相同的 CSS，它似乎表现正常。

有什么想法吗？

【问题讨论】：

标签： html css inline

【解决方案1】：

我发现在 jsfiddle 中 <!DOCTYPE html> 包含在源代码中，而您的代码可能缺少它。

此 doctype 指定文档标记符合 html 版本 5，并且应该根据 W3 建议（也称为 no quirks mode）像这样处理。

如果没有 doctype，就会触发 quirks 模式，浏览器可以以自定义方式处理某些元素。所以，我认为在 W3 建议中，即使没有内容，也会计算跨度高度，而在 quirks 模式下，它似乎只是在里面有任何内容时才被处理。

【讨论】：

虽然我 100% 确定源代码确实将 doctype 设置为 HTML5（我有它在我面前 - 铬检查器只是因为某种原因没有显示它（？）） -将其从 HTML5 更改为 HTML4 或其他是在 JSFiddle 中重现该问题的唯一方法。因此，我将尝试在项目中本地复制它，并在明天在这里给出答案。感谢您的回答。
@AndreiGabreanu 我在我的 Firefox 中运行代码，有无 DOCTYPE ......实际上，您的屏幕截图在页面中没有显示任何 DOCTYPE ......至少在 Firefox 的开发工具中，如果声明了一个，则会显示它。
看来我确实错过了文档类型，但以一种更奇怪的方式。一个 Grunt 插件——通过一些奇怪的正则表达式——覆盖了最终文档中的 html5 文档类型并添加了一个奇怪的字符。这意味着浏览器认为 doctype 无效，因此以 quirks 模式呈现。