Chrome渲染行內塊高度錯誤

Question

所以我需要的是在div中放置大量輸入，他們必須完成div。使用inline-block的

在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結構良好）