IE7のブロック要素を使った自動マージン

私は浮動小数点数を左に、イメージを（ブロックとして）内部に作成しようとしていました。 LIは水平方向ではなく垂直方向に構成されているIE 7（および6）を除いて、コードはすべてのブラウザで正常に機能します。 IE7でコードがうまく動作するためには、どうすればよいですか？（コードはhttp://jsbin.com/ilexa/editにもあります）。IE7のブロック要素を使った自動マージン

CODE：

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css"> 

<style> 
ul { 
    width:700px; 
} 
li { 
    float:left; 
    margin:10px; 
} 
li img { 
    display:block; 
    margin: 0 auto ; 
    width:50px; 
    height:50px; 
} 
</style> 
</head> 
<body> 
<ul> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
</ul> 
</body> 
</html>

出典

2010-12-05 Gidi

それがブロックとして<img>が必要ですか？スペースは<li>で完全に処理できませんか？代わりに<img>をfloat: leftと、おそらくはinline-blockと宣言することもできます（Block-level elements within display: inline-block参照）。

出典

2010-12-05 09:59:31

@Matrin - 私は後でLIにもっと多くのものを挿入しているので、私はブロックとしてが必要です（私はそれを単純にするためにソースには含めませんでした）。なぜ "ブロック"属性がこの問題の原因になるのでしょうか？（Gidi） – Joel

IEは、フロートにラップされているにもかかわらず、1行に1ブロックを許可するという「標準的な」ブロックレイアウトに従っていると思われます。画像自体に 'float'を設定してブロックしてみてください - それは役に立ちますか？ –

IE7のブロック要素を使った自動マージン

答えて

関連する問題