html - 无法通过 CSS 在 block 级 DIV 上设置像素高度

Question

我有一个 block 级别的应用程序 <div>似乎不遵守 height CSS 属性。在大多数浏览器中，它会，但在 Chromium 中，它不会。以下是一些相关的快照:

麻烦制造者

...以灰色突出显示。

Chrome

如您所见，元素的高度约为 3(ish)px，外边距为 20px。

Google Chrome、Firefox 等

但是，在所有其他浏览器中，高度呈现为 20px，外边距为 20px，就可以了。

我尝试过的

• 手动指定高度。我必须将高度设置为 250px在实际渲染高度达到 20px 之前

• 将文本垂直对齐到顶部
• 各种display类型

关于为什么只有 Chromium 的高度设置不正确有什么想法吗？

Answer 1

事实证明，我能够通过限制 <div> 的高度来解决这个问题。以上麻烦<div> :

div.place-to-put-evidence {
   ...

   height: calc(100% - 20px) !important;
}

现在都修好了。谢谢指点!