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

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

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

Answer 1

为什么不尝试浮动元素？

div在Firefox中水平显示，但在IE9中（错误地）垂直堆叠

1 个答案: