Firefox バージョン 10、11 では、次の div が希望どおりに表示されます-左から右、水平:
.containerForListStyles
{
width: 100%;
margin: 0 auto;
display:inline-block;
}
.listStyle1
{
font-family: Arial, sans-serif;
display:inline-block;
width: 250px;
margin-right: 5px;
margin-left: 3%;
}
.listStyle2
{
font-family: Arial, sans-serif;
display:inline-block;
width: 250px;
margin-left: 5px;
margin-right: 3%;
}
<div class="containerForListStyles">
<a href="www.oursite.com"><img src="www.oursite.com/images/logo-landing2.png"</img></a>
<div class="listStyle1">
This is the center div's text
</div>
<div class="listStyle2">
This is the right side text...
</div>
</div>
Firefox では、画像が左側にあり、listStyle1 div がその右側にあり、listStyle2 div がその右側にあり、すべて同じ行にあります。
IE9 では、3 つの要素 (画像アンカー、div 1 および div 2) が垂直に積み上げられます。
そこで、インライン ブロックと IE のトラブルに関する SO の投稿をいくつか調べましたが、すべての投稿で「IE8 より前」または「IE7 より前」に問題があると書かれていました。
IE9 がこれら 3 つの div の水平方向の左/中央/右レイアウトを表示するには、何を変更する必要がありますか? IE9 は「インライン ブロック」を無視しているようです。
注: 私の Android スマートフォン (HTC Evo) は、Firefox と同じ望ましい水平レイアウトを正しく表示します。