Html 处理Internet Explorer兼容模式时并排Divs

我正在设计一个使用MVC-3框架的网站。未使用IE兼容模式时，该模式显示正确，如下所示：

#id_top_elements {
  display: table-cell; 
  vertical-align: bottom;
}

<!--[if lt IE 8]>
<style>
   #id_top_elements {
       position: relative; 
       top: -50%
   }
</style>
<![endif]–>

nav, 
#menucontainer {
    margin-top: 40px;
    display: inline;
}

我使用的代码如下：

<div id="header">
        <div id="title">                                 /* NUMBER 1 */
            <img src="@Url.Content("~/Content/A_picture.png")" />
        </div>
        <div id="menucontainer">                         /* NUMBER 2 */
            <ul id="menu">
                /* some menu items*/
            </ul>
        </div>
</div>
<div id="main">                                          /* NUMBER 3 */
   @RenderBody()
</div>

---

也许您需要使用

垂直对齐

，对于ie，您应该这样设置smth：

#id_top_elements {
  display: table-cell; 
  vertical-align: bottom;
}

<!--[if lt IE 8]>
<style>
   #id_top_elements {
       position: relative; 
       top: -50%
   }
</style>
<![endif]–>

nav, 
#menucontainer {
    margin-top: 40px;
    display: inline;
}

但是，如果你能显示你的css，它可能是heplfull；）

或者像这样尝试smth：

#id_top_elements {
  display: table-cell; 
  vertical-align: bottom;
}

<!--[if lt IE 8]>
<style>
   #id_top_elements {
       position: relative; 
       top: -50%
   }
</style>
<![endif]–>

nav, 
#menucontainer {
    margin-top: 40px;
    display: inline;
}

---

不使用浮动，您也可以使用

     display: inline-block; /*which works for most browsers including newer versions of ie, the following two lines are the fix for older versions of ie.*/
     *display: inline;
     zoom: 1;

在任何需要“坐”在另一个对象/元素旁边的对象/元素上执行此操作足够令人惊讶，解决方案只是在#menucontainer css中添加一行，如下所示：

#id_top_elements {
  display: table-cell; 
  vertical-align: bottom;
}

<!--[if lt IE 8]>
<style>
   #id_top_elements {
       position: relative; 
       top: -50%
   }
</style>
<![endif]–>

nav, 
#menucontainer {
    margin-top: 40px;
    display: inline;
}

添加的行是“display:inline”，我将其添加到我的图表中的数字2 div中

谢谢大家参与这个话题
 提供CSS会有所帮助。我曾讨论过这样做，但我认为可能影响代码的部分在我更改代码时没有改变任何东西。我对这些东西不太在行；好笑，但我会重新编辑CSS。HTML通过验证了吗？我永远不会依赖兼容模式。您必须使用实际的浏览器版本才能完全确定。它混合使用HTML和mvc3帮助程序，因此我认为它可能会因为这些原因而无法通过HTML验证。如果我说我想模仿IE7，我相信这意味着我不再依赖兼容模式，而是强迫它看起来像IE7。为了澄清，你建议我将图片中项目的数字1和2包装到一个新的div中，并将新div的样式设置为你为#id#u top#元素编写的样式？是的，这就是我的建议：）非常感谢你的建议，我将不得不研究并实施！我编辑了我的问题，以反映您建议的示例。它目前不起作用，但这是否符合您的建议？再次感谢您的回复！嘿，没问题，很高兴我能帮上忙谢谢你的建议！谢谢你，Stack Overflow，谢谢你的存在，谢谢@bluebela84，谢谢你的诞生：-）。这解决了我在IE兼容模式下将div样式设置为
inline block
垂直堆叠的问题。