-1

在 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）垂直堆叠。

所以我研究了一些关于 inline-block 和 IE 问题的 SO 帖子，但这些帖子都说“pre-IE8”或“pre-IE7”有问题。

我需要更改什么以便 IE9 显示这 3 个 div 的水平左/中/右布局？似乎 IE9 忽略了“内联块”。

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

4

1 回答 1

1

为什么不尝试浮动元素？

于 2012-04-11T17:39:32.177 回答