Flexbox IE10宽度问题

Question

问题是在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上的外观

它在IE 10中的外观，在IE11的开发控制台/工具中模拟

正如您所看到的，边距正在被添加并超出容器的宽度

Answer 1

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

caniuse网站提到：

  

截至2013年9月，根据草案规范，IE10和IE11的默认值为0 0 auto而不是0 1 auto。

和

  

在IE10和IE11中，带有display：flex和flex-direction：column的容器将无法正确计算其弯曲的儿童＆＃39;如果容器具有最小高度但没有明确的高度属性，则为size。

Github网站提到：

  

当使用align-items：在列方向上的flex容器中心时，flex项目的内容（如果太大）将在IE 10-11中溢出其容器。

     

解决方法

     

大多数情况下，只需在弹性项目上设置max-width：100％即可解决此问题。如果弹性项目具有填充或边框设置，您还需要确保使用box-sizing：border-box来计算该空间。如果flex项具有边距，则单独使用box-sizing将不起作用，因此您可能需要使用带填充的容器元素。

这个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;

您总是希望在前缀列表的底部有正确的代码行 - 没有标记的代码。