html - div は Firefox では水平に表示されますが、IE9 では (誤って) 垂直に積み上げられます

Question

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 と同じ望ましい水平レイアウトを正しく表示します。

Answer 1

要素を浮かせてみませんか？