在某些情况下，线高不受尊重

问题描述 投票：-1回答：1

这是用于重现我的问题的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片段视图中一样，它按预期工作，我得到类似的东西：

what i want

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

enter image description here

我只是通过运行以下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
1个回答
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.