css – Flexbox IE10宽度问题

问题是在IE10中,行内列的宽度计算错误,似乎在列边距的宽度(总共80px)上加了,但是在Firefox和Chrome中,它完美地计算它并适合所有里面1260px.主要的问题是我已经把所有内容都放在我认为是正确的方式,但我仍然会遇到这个问题.

你可以在这里看到它在jsfiddle – http://jsfiddle.net/andyjh07/ue2zfga6/

CSS：

.row {
  width: 100%;
  position: relative;
  background: red;
  display: Box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexBox;
  display: flex;
  Box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  margin-bottom: 40px; }

  .row:after {
    content: "";
    display: table;
    clear: both; }

  .row *[class^="col-"] {
    position: relative;
    display: block;
    height: auto; }

    .row *[class^="col-"]:first-child {
      margin-left: 0; }
  @media (min-width: 64em) {
    .row {
      Box-orient: horizontal;
      -webkit-flex-direction: row;
      -moz-flex-direction: row;
      flex-direction: row;
      -ms-flex-direction: row; } }
  @media (min-width: 78.75em) {
    .row {
      max-width: 78.75em;
      margin: 0 auto; } }


.col-one-third {
  width: 100%;
  background: blue; }
  @media (min-width: 64em) {
    .col-one-third {
      width: 33.3%;
      margin-left: 40px; } }


.col-two-thirds {
  width: 66.7%;
  margin-left: 40px;
  background: blue; }

Chrome,IE11,Firefox的外观

IE10的开发控制台/工具中的IE 10的外观如何

正如你所看到的那样,边距被添加并超出了容器的宽度

解决方法

我没有IE10可用,但似乎应该看看 caniuse.com和已知的问题.或者也许这个 user moderated list在Github上.或者也许 css-tricks guide的评论部分.

caniuse网站提到：

IE10 and IE11 default values for flex are 0 0 auto rather than 0 1 auto,as per the draft spec,as of September 2013.

和

In IE10 and IE11,containers with display: flex and flex-direction: column will not properly calculate their flexed childrens’ sizes if the container has min-height but no explicit height property.

Github网站提到：

When using align-items:center on a flex container in the column direction,the contents of flex item,if too big,will overflow their container in IE 10-11.

Workaround

Most of the time,this can be fixed by simply setting max-width:100% on the flex item. If the flex item has a padding or border set,you’ll also need to make sure to use Box-sizing:border-Box to account for that space. If the flex item has a margin,using Box-sizing alone will not work,so you may need to use a container element with padding instead.

这个comment on css-tricks显示,你通常会说flex：1;你应该说-ms-flex：1 0 auto;

此外,您应该将代码更改为如下所示：

-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;

到这个：

-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;

你总是想要正确的代码行 – 没有标志的代码 – 在前缀列表的底部.