1

我做了一个关于如何设置页面水平显示元素的教程，它在 FF 和 Chrome 上运行良好，但在 IE8 中不行。

它在 FF 和 Chrome 中水平渲染元素，在 IE8 中垂直渲染元素。我想“box-orient: Horizo​​ntal”会为 IE8 设置布局。

我知道 IE8 不支持很多 HTML5 和 CSS3 功能，但我已经使用 PIE 在此浏览器上显示带圆角的框。我假设 IE8 将支持基本功能，例如水平显示元素。

#box-wrap-inner {
    display: -webkit-box;
    display: -moz-box;
    display: box;

    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;

    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;

}

#box1 {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;

    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
}

#box2 {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;

    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
}

#box3 {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;

    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    box-ordinal-group: 3;
}
4

3 回答 3

3

flexbox模块相当新，在 IE8 和 IE9 中不受支持（在 IE10 中，只有该规范的旧版本支持 prefix -ms）并且不能由 PIE 模拟，您需要一些手动解决方法，例如表格或需要忍受它在 Internet Explorer 中被破坏的事实（这通常很糟糕 - 他们的市场份额仍然很高）。

支持图表

有一个shim 可以让它在 IE 中工作。一般来说，如果您在使用一些较新的 HTML5/CSS-Stuff 时遇到问题，这个站点会很有帮助：Modernizr Polyfill List。

编辑：

它现在具有候选推荐状态，因此您可以期待它很快变得非常稳定并且可以在浏览器中使用。FF21 已经去掉了前缀，现在 IE10 可用于 win7，所以人们真的可以开始使用这个模块了。

于 2012-12-07T13:50:40.707 回答
0

根据MDN 文档：

Internet Explorer 10 和 Safari 支持旧的不兼容的规范草案版本。它们尚未更新以支持最终版本。

如果 IE10 还没有搞定，你将无法在 IE8 中做到这一点。

于 2012-12-07T13:51:53.263 回答
0

新的善良都不起作用。使用 ie 特定的样式表并浮动您的元素。

<!--[if lt IE 9]><style> /** css to make ie8 play nicely **/ </style> <![endif]-->

在没有看到你的风格的情况下，我无法具体告诉你要做什么……但这是一种行之有效的方法。只是不要忘记清除你的花车！

于 2012-12-07T13:56:38.577 回答