IE 弹性盒模型不起作用 [英] IE flexible box model not working

问题描述

我正在尝试在我的网站中实现灵活的框模型，虽然它适用于 -webkit 浏览器(如 chrome 和 safari)、其他浏览器(如 mozilla 和 opera)，但我似乎无法在 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-box-.. 名称，但它似乎仍然没有注册.出于绝望，我尝试使用 CSS3Pie 库，尽管那没有用，但也尝试为 IE 安装 Chrome 插件，但也失败了，而且我完全不知道该怎么做.也许我已经编写的 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 支持没有前缀的 Flexbox 标准 属性和 2009 属性在 -webkit- 前缀下.

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屋！