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 的开发人员中模拟 console/tools

如您所见，添加的边距超出了容器的宽度

Answer 1

我没有可用的 IE10，但你似乎应该看看 caniuse.com and the known issues. Or maybe this user moderated list on Github. Or maybe the comment section of the 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;

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

Flexbox IE10 宽度问题

Flexbox IE10 width issues

css

flexbox