为什么这个 div 内联块跨度的行为与正常行为不同

Question

鉴于此 fiddle https://jsfiddle.net/2pct6pbv/2/ ，为什么波纹管 div/span （屏幕截图）不以相同的方式运行 - 这意味着 div 应该有 24px 高度（ line-height * font-size from body) 而跨度应该有 0px 高度（检查屏幕截图#2，右下 chrome inspector）

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

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

div {
  background-color: red;
}

span {
  display: inline-block;
}

我尽了一切努力让它以同样的方式运行，但它似乎不起作用。在另一页中，完全相同的CSS，它似乎表现正常。

有什么想法吗？

Answer 1

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

此 doctype 指定文档标记符合 html 版本 5，并且应根据 W3 推荐，即 no quirks mode 像这样处理。

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

为什么这个 div 内联块跨度的行为与正常行为不同

Why is this div with an inline-block span behaving differently than normal

html

css

inline