Question

所以我需要的是在div中放置大量输入，他们必须完成div。

在使用内联块的firefox工作正常，但在chrome中它有一个奇怪的行为，如plunker中所见：Plunker

.cl {
    font-size: 11px;
    font-family: monospace;
    background: black;
    width: 50px;
    height: calc(14.24px);
    display: block;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: 0 !important;
    outline-offset: 0;
    outline: 0;
}

有人知道修复此问题吗？

Answer 1

只需将vertical-align: top;或任何其他vertical-align值添加到您的inline-block元素中。

此外，calc(14.24px)毫无意义，只需使用height: 14px;
另外，避免使用!important（如果你的CSS结构合理，几乎没有理由使用它）

Chrome错误地呈现内联块高度

1 个答案: