Question

鉴于这个小提琴https://jsfiddle.net/2pct6pbv/2/，为什么bellow div / span（截图）不是以相同的方式起作用 - 意味着div应该具有24px高度（行高=行体的字体大小），而span应该有0px高度（查看屏幕截图＃2，右下角的chrome检查员）

编辑：我已经添加了最后一个屏幕截图，基本上所有内容都被删除，类似于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）进行处理。

如果没有doctype，则会触发怪癖模式，浏览器可以自定义方式处理某些元素。因此，我认为在W3建议中，即使没有内容，也会计算跨度高度，而在怪癖模式下，如果内部有任何内容，它似乎会被处理。