Question

以下是用于重现我的问题的html：

<div style="
    line-height: 100px;
    background: red;
"><div style="
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
    background: green;
"></div>
</div>

在某些情况下，例如在上述stackoverflow片段视图中，它可以按预期运行，而我得到的东西是这样的：

但是在我的网站上，其显示如下：

我只能通过运行以下javascript来替换网页内容来重新创建它-使用控制台在chrome中完成，请在此页面上尝试：

document.write(`<html><head></head><body><div style="
    line-height: 100px;
    background: red;
"><div style="
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
    background: green;
"></div>
</div></body></html>`);

奇怪的是，如果您在代码段中运行相同的脚本，则效果很好：

document.write(`<html><head></head><body><div style="
    line-height: 100px;
    background: red;
"><div style="
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
    background: green;
"></div>
</div></body></html>`);

两种情况之间有什么区别，实际情况如何？

Answer 1

在折叠版本中似乎缺少您的文档类型。尝试在html标记之前添加它：

<!DOCTYPE html>

在某些情况下不遵守行高

1 个答案: