ゴーストIE 11で、親と子の間のマージン/パディング

Question

私はinline-block親と子要素を持っている場合はIEがそれらの間のゴーストのスペースを示しています

私はHTMLで空白を削除することによってこの問題を解決することができますが、私はこのためのCSSのクロスブラウザのソリューションがあるかどうかを知りたい。

.bar { 
 
    height: 30px; 
 
} 
 

 
.section { 
 
    display: inline-block; 
 
    height: 100%; 
 
    background: red; 
 
} 
 

 
.section::before { 
 
    content: ""; 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
    margin-left: -.25rem; 
 
} 
 

 
span { 
 
    background: green; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div class="bar"> 
 
    <div class="section"> 
 
    <span> 
 
     IE ghost 
 
    </span> 
 
    </div> 
 

 
    <div class="section"> 
 
    <span> 
 
    No ghost 
 
    </span><!-- 
 
--></div> 
 
</div>

Answer 1

これはinline-blockのinline行動が原因で発生します。それらは、周囲の兄弟要素（スペース、テキストなどを含む）が無視されるのとは対照的に解析される他のインライン要素のように扱われます。

あなたが述べたように、1つの解決策は、影響を受けるdiv間の空白を削除することです。これはあなたのHTML書式に混乱を招く可能性があります。 CSS.whiteスペースを使用して

ソリューション：

あなたはあなたがNOWRAPに .white-spaceのCSSプロパティを設定することができますその後、をラップするために含むdiv.barの内容を必要としないであろうことを確信している場合：なぜあなたはIEを使用している

.bar { 
    height: 30px; 
    white-space: nowrap; 
}