Chrome渲染行内块高度错误

2016-10-26 66 views 1 likes

所以我需要的是在div中放置大量输入，他们必须完成div。使用inline-block的Chrome渲染行内块高度错误

在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; 
}

有谁知道一个解决？

来源

2016-10-26 AMagyar

我已经放在另一个DIV与显示模块输入进行比较。 – AMagyar

'height：calc（14.24px）;'没有意义，写'height：14.24px;'。因为'calc（）'是用不同单位进行计算的函数（例如'calc（100％ - 24px）' –

我知道calc（fixed px）没有意义，我只是在尝试并忘记了回滚这个变化 – AMagyar

回答

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

此外，calc(14.24px)是没有意义的，使用简单height: 14px;
另外，避免使用!important（有几乎没有理由使用它，如果你的CSS结构良好）

来源

2016-10-26 11:16:18

我看到，14px工作正常，为什么我不能使用14.24px？ – AMagyar

@AMagyar导致一个像素是一个像素 –

在块显示，它的工作.. – AMagyar

Chrome渲染行内块高度错误

回答

相关问题