我们如何在IE中水平对齐css框

Question

我需要在我的网页中水平对齐三个css框。 我尝试使用webkit和mozilla box定位并对齐属性。

-webkit-box-orient:horizontal;
-webkit-box-pack:center;
-webkit-box-align:center;

此代码在Mozilla Firefox中运行良好但不适用于IE。我需要水平对齐盒子的方法。代码必须支持所有Web浏览器。 请帮我解决这个问题。

Answer 1

所有网络浏览器都支持的代码是我们所希望的：3

到目前为止，大多数主流浏览器已经开始实现一些的CSS3功能，而且更具体一点，IE还没有实现面向盒子的功能，所以你不能在所有主要的Web浏览器中真正得到任何支持。作为建议，如果您正在使用具有响应式设计的渐进式网站，则应该只考虑使用CSS3。我建议使用modernizr来帮助你，如果你想做的话。

否则，您应该坚持使用经过验证的方法，例如inline和float或可能表格布局。

---

我使用JSFiddle作为基准工具，为您准备了示例browsershots的一些屏幕截图，以了解不同解决方案的外观。 JSFiddle示例包括

• box-orient: horizontal;
• float: left;
• display: inline-block;
• 表格布局

我只使用了相当新版本的浏览器，但你可以通过自己的比较更广泛。

无论如何，here's the JSFiddle这里是截图

正如您所看到的，所有主流浏览器及其许多版本似乎都支持的方法是float和inline-block。表也​​可以使用，但我建议只有在显示数据时才使用表，这不是真正意义上的设计和布局。

_{请注意，IE8和IE9之间的唯一区别是背景颜色，因为我使用:nth-child()伪，所以实际上没有任何实际差异。 IE7不知道inline-block是什么，所以如果您有一个渐进式网站，只需将其更改为inline。}

这些是我知道的唯一解决方案，可以为您水平对齐方框。