CSS Flexbox IE10 宽度问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29562755/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox IE10 width issues
提问by Andy Holmes
The problem is that in IE10, the width of the columns inside the row is being calculated wrong, it appears to be adding on the width of the column margins (in total 80px), but in Firefox and Chrome it calculates it perfectly and fits everything inside 1260px. The main issue is that i have prefixed everything in what i believe is the right way, but i still get the issue.
问题是在 IE10 中，行内列的宽度计算错误，它似乎增加了列边距的宽度（总共 80 像素），但在 Firefox 和 Chrome 中它计算得很好并且适合所有内容在 1260 像素内。主要问题是我以我认为正确的方式为所有内容添加了前缀，但我仍然遇到问题。
You can see it here on jsFiddle - http://jsfiddle.net/andyjh07/ue2zfga6/
你可以在 jsFiddle 上看到它 - http://jsfiddle.net/andyjh07/ue2zfga6/
CSS:
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; }
How it looks on Chrome, IE11, Firefox
它在 Chrome、IE11、Firefox 上的外观
How it looks on IE 10, emulated inside IE11's dev console/tools
它在 IE 10 上的外观，在 IE11 的开发控制台/工具中模拟
As you can see, the margin's are being added and going beyond the width of the container
如您所见，正在添加边距并超出容器的宽度
回答by Joseph Hansen
I don't have IE10 available, but it seems like you should look at caniuse.comand the known issues. Or maybe this user moderated liston Github. Or maybe the comment section of the css-tricks guide.
我没有可用的 IE10，但您似乎应该查看caniuse.com和已知问题。或者也许这个用户在 Github 上主持了列表。或者也许是css-tricks guide的评论部分。
The caniuse site mentions:
caniuse 网站提到：
IE10 and IE11 default values for flex are
0 0 autorather than0 1 auto, as per the draft spec, as of September 2013.
根据草案规范，截至 2013 年 9 月，IE10 和 IE11 的 flex 默认值是
0 0 auto而不是0 1 auto。
and
和
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.
在 IE10 和 IE11 中，如果容器具有 min-height 但没有明确的高度属性，则具有 display: flex 和 flex-direction: column 的容器将无法正确计算其弯曲子项的大小。
The Github site mentions:
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.
当在列方向的弹性容器上使用 align-items:center 时，弹性项目的内容，如果太大，将在 IE 10-11 中溢出它们的容器。
解决方法
大多数情况下，这可以通过简单地在 flex 项目上设置 max-width:100% 来解决。如果 flex 项设置了填充或边框，您还需要确保使用 box-sizing:border-box 来考虑该空间。如果 flex 项有边距，单独使用 box-sizing 将不起作用，因此您可能需要使用带有填充的容器元素。
This comment on css-tricksshows that where you would normally say flex: 1;you should say -ms-flex: 1 0 auto;
这个关于 css-tricks 的评论表明你通常会说flex: 1;你应该说的地方-ms-flex: 1 0 auto;
Also, you should change your code where it does something like this:
此外，您应该更改代码，使其执行以下操作：
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
to this:
对此：
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
You always want the proper line of code—the one without flags— at the bottom of the prefix list.
你总是希望在前缀列表的底部有正确的代码行——没有标志的那一行。
