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

Html div在Firefox中水平显示,但在IE9中(错误地)垂直堆叠,html,firefox,internet-explorer-9,css,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; widt

在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>
.containerForListStyles
{
宽度:100%;
保证金:0自动;
显示:内联块;
}
.listStyle1
{
字体系列:Arial,无衬线;
显示:内联块;
宽度:250px;
右边距:5px;
左缘:3%;
}
.listStyle2
{
字体系列:Arial,无衬线;
显示:内联块;
宽度:250px;
左边距:5px;
保证金权利:3%;
}
这是中间div的文本
这是右边的文字。。。
在Firefox中,图像在左边,listStyle1 div在右边,listStyle2 div在右边,所有这些都在同一行上

在IE9中,3个元素(图像锚定、div 1和div 2)垂直堆叠

所以我研究了一些关于内联块和IE问题的帖子,但是这些帖子都说“pre-IE8”或“pre-IE7”存在问题

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


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

为什么不尝试浮动元素?

我们没有从内联块切换。我们非常确定这不是问题所在——没有关于内联块和IE9的投诉。事实上,UI在其他浏览器中也很好——只有IE9垂直堆叠div。一定是我们做错了,在其他浏览器中被“忽略”了,或者是我们做的还可以,但在IE9中被“隐藏”了。您是否为body标记设置了硬宽度?有没有一个地方我们可以看到整个来源?可能会有更高层次的事情发生。你的直觉是正确的。在我们的整个代码中,我们都有以下语法:require_once'somefile.php',我们注意到,我们在试图解决这个问题时发现的所有代码示例都使用了完全不同的语法——形式为require_once('somefile.php'),在这一更改之后,IE9现在100%接受内联块。