IE软盒模型不工作 [英] IE flexible box model not working

问题描述

我试图在我的网站实现灵活的盒子模型，虽然它工作的-webkit浏览器像chrome和safari，其他浏览器，如mozilla和歌剧，我似乎无法使它在Internet Explorer中工作，没有事情我做什么。我的Css样式表文件的一个小片段包含我的.holder类容纳一切，我的#new_div id是.holder的孩子，并且包含我的主要部分的帖子和侧边栏。

Im trying to implement the flexible box model into my website, and while its working for the -webkit-browsers like chrome and safari, other browsers like mozilla and opera, I jus cant seem to get it working in Internet Explorer, no matter what I do. Heres a short snippet of my Css stylesheet file containing my .holder class which houses everything, and my #new_div id which is a child of .holder and houses my main section for posts and sidebar.

.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-沿着其他定义，然而它仍然似乎不注册。我试过使用CSS3Pie库中的绝望，虽然这没有工作，尝试安装Chrome插件为IE虽然失败了，我是出于对什么做的想法。也许可能有一个语法问题的css我已经写了，抛弃它，但正如我所说，它在其他浏览器工作正常。任何建议或提示？

There you can see I have the -ms-box-.. names defined along side the other definitions, however it still doesnt seem to register. I've tried using the CSS3Pie library out of desperation though that didnt work, tryed installing the Chrome plugin for IE though that failed also and I'm jus out of ideas on what to do guys. Maybe there could be a syntax problem with the css I already have written thats throwhing it off, but as I said it works fine in the others browsers. Any suggestions or tips?

推荐答案

IE不使用已弃用2009 Flexbox属性，它使用了已弃用的 2012年3月草稿。 Opera支持不带前缀和2009属性的 Flexbox标准属性

IE doesn't use the deprecated 2009 Flexbox properties, it uses the ones from the deprecated March 2012 draft. Opera supports the Flexbox standard properties without prefixes and the 2009 properties under the -webkit- prefix.

.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 +

Also worth noting, this requires IE10+

这篇关于IE软盒模型不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！