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

Question

我需要在我的网页中水平排列三个 css 框。我尝试使用 webkit 和 mozilla box orient and align properties 来做到这一点。

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

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

Answer 1

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

到目前为止，大多数主流浏览器都开始实现 一些 CSS3 特性，更具体地说，IE 还没有实现面向盒子的特性，所以你不能真正在所有主要网络浏览器上都获得了对它的支持。作为建议，如果您正在使用响应式设计的渐进式网站，您应该只考虑使用 CSS3。我建议使用 modernizr如果那是你想做的，我会帮助你。

否则，您应该坚持使用行之有效的方法，例如 inline 和 float 或者可能表格布局。

---

我已经对示例的一些屏幕截图进行了采样 JSFiddle对你来说，使用browsershots作为基准工具，查看不同解决方案的外观。 JSFiddle 示例包括

• box-orient: horizo​​ntal;
• float :左；
• 显示:内联 block ；
• 表格布局

我只拍摄了最近版本的浏览器截图，但您可以通过自己的比较进行更广泛的比较。

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

如您所见，似乎所有主要浏览器及其许多版本都支持的方法是float 和inline-block。表格也可以，但我建议仅在有数据要显示时才使用表格，它并不是真正用于设计和布局。

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

这些是(据我所知)唯一可以水平对齐框的解决方案。