时间戳

首页 > 解决方案 > 在某些情况下不尊重行高

css - 在某些情况下不尊重行高

问题描述

这是用于重现我的问题的 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>`);

这两种情况有什么区别，实际发生了什么？

标签： css

解决方案

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

<!DOCTYPE html>

推荐阅读