奇妙な境界配置

Question

私は奇妙なCSSバグを発見しました。

私は<div>という文字列と内部にフォントアウェーアイコンを持つコンテナを持っています。 <div>コンテナは小さな境界線を持つようにスタイリングされています。奇妙なことに、国境はと思われます。は、<div>が実際の高さの半分にすぎないと思っています。

これは、クロームモバイル（アンドロイド）ではなく、クロムデスクトップ（サファリと共同でテストされていません...）

HTML

<div class="sidebar"> 
    Lade Daten... <li class="fa fa-spin fa-spinner"></li> 
</div> 

CSSでのみ発生します

@media only screen and (max-width: 860px) 
{ 
    .sidebar { 
     position: relative; 
     width: auto; 
     margin: 0 20px; 
    } 
} 

.sidebar { 
    position: absolute; 
    background: rgb(255, 255, 255); 
    border-radius: 5px; 
    margin-left: 20px; 
    padding: 20px; 
    border: 1px solid rgba(0, 0, 0, 0.9); 
    width: 335px; 
    box-shadow: 2px 2px 5px; 
} 

body { 
    margin: 0; 
    background: rgb(60,60,60); 
    font-size: 16px; 
    font-family: 'Share Tech Mono', Arial; 
} 

Answer 1