Chromeのインラインブロックの高さを間違ってレンダリングする

私が必要とするのは、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; 
}

誰もがそのための修正を知っていますか？

出典

2016-10-26 AMagyar

!importantの使用を避けるため、また単にheight: 14px;
を使用比較する入力。 – AMagyar

'height：calc（14.24px）;'意味がなく、 'height：14.24px;'と書いてください。 'calc（）'は異なる単位（例えば 'calc（100％ - 24px）'のような計算をする関数なので、 –

私はcalc（fixed px）が意味をなさないと知っています。この変更 – AMagyar

inline-block要素にvertical-align: top;または他のvertical-alignの値を単に追加してください。

また、calc(14.24px)は意味をなさない、（自分のCSSがよく構造化された場合にそれを使用するほとんどない理由があります）私が表示ブロックで別のdivを配置した

出典

2016-10-26 11:16:18

14pxがうまく動作することがわかります。なぜ14.24pxを使用できないのですか？ – AMagyar

@AMagyarはピクセルはピクセルです –

ブロック表示では、それは動作します.. – AMagyar

Chromeのインラインブロックの高さを間違ってレンダリングする

答えて

関連する問題