まず、画像が消えていたので、<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
ヘッダーに配置して修正しました。いいですね!
これで、画像が表示されますが、2 番目のブロック[IMG]の後に重なっています。IE 7-9をインストールできないため、これを解決するのは難しいと思います.netrendererなどのエミュレータに依存しています:(
ヘッダーは<!DOCTYPE html>
他のものを試してみましたが、何も変わりません。
コンテナは次のようになります。
<div class="post-container-odd" >
<h2><a href="http://site.com/destinos/africa-ilhas/">África & Ilhas</a></h2>
<div class="thumbnail"><a href="http://site.com/destinos/africa-ilhas" title="Ilhas Maldivas"><img src="http://site.com/wp-content/uploads/2012/07/maldivas-22-380x200.jpg" title="" alt=""/></a></div>
</div>
<div class="post-container-even" >
<h2><a href="http://site.com/destinos/america-do-norte-caribe/">América do Norte & Caribe</a></h2>
<div class="thumbnail"><a href="http://site.com/destinos/america-do-norte-caribe" title="Chicago"><img src="http://site.com/wp-content/uploads/2012/07/chicago-29-380x200.jpg" title="" alt=""/></a></div>
</div>
そしてCSSはこれだけです:
.post-container-even{float:left;margin:0 0 20px 0;display:table}
.post-container-odd {float:left; margin: 0 5px 20px 0}
これに a を追加しましたie.css
(いくつかの問題は解決しましたが、まだ重複しています):
.post-container-odd { float:left; margin: 0 5px 30px 0; display:inline;}
.post-container-even{ float:left; margin:0 0 30px 0; display:inline; clear: left}
.post-container-even img, .post-container-odd img { height: 200px ; width: 380px ; display:block; clear: both}
.post-container-even .thumbnail, .post-container-odd .thumbnail { height: 200px ; width: 380px ; }
たぶん、<div style="clear:both"></div>
2つおきのイテンで解決できるかもしれませんが、それはかなり不自由ですか?
助けてくれてありがとう
ノート:
説明書なしie.css
:イメージ
今、とie.css
:画像