用于 IE 和 Opera 的 display:box 的 CSS 替代方案?

发布于 2024-11-26 21:05:48 字数 751 浏览 4 评论 0原文

我正在使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

对你而言 2024-12-03 21:05:48

Flexie 在本身不支持 display: box; 的浏览器中实现了对此的支持。

Flexie implements support for this in browsers that do not natively support display: box;.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文