gpt4 book ai didi

css - IE 灵活的盒子模型不起作用

转载 作者:太空宇宙 更新时间:2023-11-03 20:50:33 25 4
gpt4 key购买 nike

我试图在我的网站中实现灵活的盒子模型,虽然它适用于 chrome 和 safari 等 -webkit 浏览器,其他浏览器如 mozilla 和 opera,但我似乎无法让它在 Internet Explorer 中工作,不不管我做什么。这是我的 Css 样式表文件的一小段,其中包含包含所有内容的 .holder 类,以及我的 #new_div id,它是 .holder 的子项,包含我的帖子和侧边栏的主要部分。

.holder
{
width:100%;
margin:auto;
display:-webkit-box;
display:-o-box;
display:-ms-box;
display:-box;
display:-pie;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
-o-box-orient:vertical;
-ms-box-orient:vertical;
-box-orient:vertical;
-pie-box-orient:vertical;
-moz-box-flex:1; /* Firefox, seamonkey etc */
-o-box-flex:1; /* Opera */
-ms-box-flex:1; /* MSIE */
-box-flex:1; /* Any that support full implementation */
-pie-box-flex:1;
-webkit-box-flex:1;
-webkit-box-pack:center;
-o-box-pack:center;
-ms-box-pack:center;
-pie-box-pack:center;
-box-pack:center;
text-align:center;
behavior: url(../../Content/pie/PIE.htc);
}

.holder #new_div
{
width:940px;
}
.holder div
{
-webkit-box-pack:center;
-o-box-pack:center;
-ms-box-pack:center;
-box-pack:center;
-pie-box-pack:center;
behavior: url(../../Content/pie/PIE.htc);
}
#new_div
{
margin:auto;
display:-webkit-box;
display:-moz-box;
display:-o-box;
display:-ms-box;
display:-box;
display:-pie-box;
text-align:left;
-webkit-box-flex:1;
-moz-box-flex:1; /* Firefox, seamonkey etc */
-o-box-flex:1; /* Opera */
-ms-box-flex:1; /* MSIE */
-box-flex:1;
-pie-box:1;
-webkit-box-pack:center;
-box-pack:center;
-moz-box-pack:center;
-o-box-pack:center;
-ms-box-pack:center;
-pie-box-pack:center;
background-color:#25282D;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-o-box-orient:horizontal;
-ms-box-orient:horizontal;
-box-orient:horizontal;
-pie-box-orient:horizontal;
min-width:940px;
padding:20px;
behavior: url(../../Content/pie/PIE.htc);
}

在那里你可以看到我在其他定义旁边定义了 -ms-box-.. 名称,但它似乎仍然没有注册。我尝试过绝望地使用 CSS3Pie 库,尽管那没有用,尝试为 IE 安装 Chrome 插件,尽管也失败了,我只是不知道该怎么做。也许我已经写过的 css 可能存在语法问题,但正如我所说,它在其他浏览器中运行良好。有什么建议或提示吗?

最佳答案

IE 不使用 deprecated 2009 Flexbox properties ,它使用了已弃用的 March 2012 draft 中的那些. Opera 支持 Flexbox standard没有前缀的属性和 -webkit- 前缀下的 2009 属性。

.holder {
width: 100%;
margin: auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
text-align: center;
}

.holder #new_div {
width: 940px;
}

.holder div {
/* justify-content does nothing here since this element isn't a flex container */
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}

#new_div {
margin: auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
text-align: left;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
/* this shouldn't be necessary, as the default direction is `row` */
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
min-width: 940px;
padding: 20px;
}

另外值得注意的是,这需要IE10+

关于css - IE 灵活的盒子模型不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16487884/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com