IE和Chrome中的不同对齐（多个<div>以对齐中心和水平）

Question

我想水平对齐多个div。 这是我简单的测试代码。

＆＃13;

＆＃13;

<div style="text-align: center;">
    <div style="border:1px solid #000; display:inline-block;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>

＆＃13;

＆＃13;

＆＃13;

在Chrome中看起来很好，但在IE中并不像下图那样工作

为什么它与IE和Chrome有所不同？ 任何答案都会谢谢。

Answer 1

试试这个：

<div style="text-align: center;">
    <div style="border:1px solid #000; display:inline-block; *display: inline;">Div 1</div>
    <div style="border:1px solid red; display:inline-block; *display: inline;">Div 2</div>
</div>

Answer 2

以下是涵盖此主题的优质资源：http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

IE基本上有一个名为“hasLayout”的触发器。触发此操作将允许您在块级元素上使用display：inline-block（默认情况下，IE仅允许在本机内联元素上使用内联块）。

此外，较旧版本的Fire Fox也不支持inline-block，但有一个“inline-stack”值（moz-inline-stack）。

据我所知，这是获得跨浏览器显示的最佳方式：内联块：

{{1}}