Flexbox IE10 宽度问题

Question

问题是在 IE10 中，行内列的宽度计算错误，它似乎是在列边距的宽度上添加（总共 80 像素），但在 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 和已知问题。或者可能是 Github 上的 user moderated list。或者css-tricks guide的评论区。

caniuse 网站提到：

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

和

在 IE10 和 IE11 中，如果容器具有 min-height 但没有显式的 height 属性，则具有 display: flex 和 flex-direction: column 的容器将无法正确计算其伸缩后的子元素的大小。

Github 网站提到：

当在列方向的弹性容器上使用 align-items:center 时，弹性项目的内容如果太大，会在 IE 10-11 中溢出它们的容器。

解决方法

大多数情况下，这可以通过简单地设置 flex 项目的 max-width:100% 来解决。如果弹性项目设置了填充或边框，您还需要确保使用 box-sizing:border-box 来考虑该空间。如果弹性项目有边距，单独使用 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;

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