用于 IE 和 Opera 的 display:box 的 CSS 替代方案?
我正在使用 display:box 作为灵活宽度的 div,其中包含三个大小相等且间距相等的框。这适用于 Firefox、Safari 和 Chrome,但不适用于 IE 和 Opera。我想知道 IE 和 Opera 的最佳替代方法是什么。这是 display:box CSS:
.box {
display: -moz-box;
display: -webkit-box;
display: box;
width: 100%;
}
.box1, .box2, .box3 {
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
width: 0;
}
.box2, .box3 {
margin-left: 20px;
}
和 HTML:
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
您可以在此处查看它的实际效果。
我很高兴听到在 IE 和 Opera 中实现类似结果的替代方法。
谢谢,
尼克
I am using display:box for a flexible width div with three boxes of equal size and with equal spacing. This works fine for Firefox, Safari and Chrome, but not in IE and Opera. I am wondering what the best alternative method for IE and Opera would be. Here is the display:box CSS:
.box {
display: -moz-box;
display: -webkit-box;
display: box;
width: 100%;
}
.box1, .box2, .box3 {
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
width: 0;
}
.box2, .box3 {
margin-left: 20px;
}
And the HTML:
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
You can see it in action here.
I'd be glad to hear of an alternative method for achieving a similar result in IE and Opera.
Thanks,
Nick
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
Flexie 在本身不支持
display: box;
的浏览器中实现了对此的支持。Flexie implements support for this in browsers that do not natively support
display: box;
.