div在Firefox中水平显示,但在IE9中(错误地)垂直堆叠

时间:2012-04-11 17:14:30

标签: html firefox internet-explorer-9 css

在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故障的帖子,但帖子都说“IE8之前”或“IE7之前”存在问题。

我需要更改什么才能让IE9显示这3个div的水平左/中/右布局? 似乎IE9忽略了'inline-block'。

注意:我的Android智能手机(HTC Evo)正确显示了与Firefox相同的所需水平布局。

1 个答案:

答案 0 :(得分:1)

为什么不尝试浮动元素?