0

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

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

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

4

1 回答 1

0

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

到目前为止，大多数主流浏览器已经开始实现一些CSS3 特性，更具体地说，IE 还没有实现 box-orient 特性，所以你无法真正得到所有主流浏览器的支持。网络浏览器。作为一个建议，如果你正在使用响应式设计的渐进式网站，你应该只考虑使用 CSS3。如果您想这样做，我建议使用modernizr来帮助您。

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

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

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

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

无论如何，这里是 JSFiddle，这里是截图 比较

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

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

这些是唯一可以为您水平对齐框的解决方案（据我所知）。

于 2013-01-09T17:26:48.223 回答