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

既然如此，为什么下面的div/span（屏幕截图）不以同样的方式工作？这意味着div的高度应该是24px（行距*字体大小），而span的高度应该是0px（检查屏幕截图#2，右下角的chrome inspector）

编辑：我添加了最后一个屏幕截图，基本上所有内容都被剥离，与JSFIDLE类似。我不知道还有什么可以重现这个问题

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

div {
  background-color: red;
}

span {
  display: inline-block;
}

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

有什么想法吗

---

我发现在JSFIDLE中，源代码中包含了一个

，而您的代码可能缺少它

此doctype指定文档标记符合HTMLVersion5，并且应根据W3建议（又名no

---

如果没有doctype，将触发“怪癖”模式，浏览器可以以自定义方式处理某些元素。因此，我认为在W3建议中，跨度高度是计算出来的，即使它没有任何内容，而在quirks模式中，它似乎只是在里面有任何内容时才被处理

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