Question

我在IE 10支持和flexbox中遇到了不一致。

请参阅此代码笔：http://codepen.io/davestaab/pen/mywbxd 或者这个片段：

.container {
  width: 300px;
  background-color: lightgray;
  color: #555555;
}

.flex-parent {
  display: flex;
  padding: 15px;
  border-top: thin solid black;
  border-bottom: thin solid black;
  flex-direction: row;
  flex-wrap: nowrap;
  
}

.flex-child {
  flex: 0;
  padding: 0 20px;
  text-align: center;
}
.flex-child-label {
  flex: 1;
  /* have to add this to get it to work correctly in IE10 */
  /*display:block;*/
}

<div class="container">
  <div class="flex-parent">
    <span class="flex-child-label">Inbox</span>
    <span class="flex-child">1</span>
  </div>
  <div class="flex-parent">
    <span class="flex-child-label">Sent</span>
    <span class="flex-child">2</span>
  </div>
  <div class="flex-parent">
    <span class="flex-child-label">More</span>
    <span class="flex-child">3</span>
  </div>
<div>

这是有问题的CSS：

.flex-child-label {
  flex: 1;
  /* have to add this to get it to work correctly in IE10 */
  /*display:block;*/
}

这在webkit浏览器和IE11中按预期工作。在IE10中，flex：1; .flex-child-label类上的样式似乎被忽略了。如果我使.flex-child-label类显示：阻止它按预期工作。

我需要确保flexbox的子项是显示块吗？我应该使用-ms-类/属性吗？这是IE10中的一个错误还是旧版flexbox规范的一部分？

由于

IE10中的显示flex与非阻止子项无法正常工作

0 个答案: