CSS3子コンビネータに*

Question

私はCSS3子コンビネータ（>）を使ってdivの子をmax-width: 100%;に設定しようとしています。 box-sizing:border-box;と組み合わせて、divの任意のコンテンツがdivを決して超えないように設定しようとしています。

* { 
    box-sizing: inherit; 
} 
html { 
    box-sizing: border-box; 
} 
div > * { 
    max-width: 100%; 
} 

は今、私はdivの内側にイメージを持っている：

<div style="width: 70%;"> 
    <img src="foo" width="750" height="200" /> 
</div> 

750個のピクセルはdiv要素の70％の幅よりも広くなっている場合は、画像はdiv要素の勃発します。 CSSを次のように変更した場合：

div > img { 
    max-width: 100%; 
} 

... divに収まるように画像が縮小されます。私はここで何が欠けていますか？この状況でワイルドカード*が動作しないという既知の問題はありますか？画像について

（名前空間を使用していない限り）あなたはautoのheightする必要があります

Answer 1

子供セレクタのサポート（>）はIE 7にベースを遡り、ユニバーサルセレクタ（*は）戻ってIE 7にも同様にさかのぼりそれが伸びないようにする。

* { 
 
    box-sizing: inherit; 
 
} 
 
html { 
 
    box-sizing: border-box; 
 
} 
 
div > * { 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<div style="width: 70%;"> 
 
    <img src="http://placehold.it/750x200" width="750" height="200" /> 
 
</div>