Internet Explorer 忽略 flexbox 容器的宽度答案

【问题标题】：Internet Explorer ignores width of flexbox containerInternet Explorer 忽略 flexbox 容器的宽度
【发布时间】：2015-05-21 10:13:33
【问题描述】：

我正在工作的网站具有响应式网格布局，这是我使用 flexbox 实现的。问题是，它在 IE（任何版本）中看起来非常糟糕，因为它出于某种原因它忽略了容器的宽度并显示它比屏幕尺寸宽得多。

我已经设法通过添加“最大宽度”来解决这个问题，但没有太大帮助，因为设计是响应式的。

它应该是这样的：http://gagadaily.com

这是它在 IE 中的样子：http://i62.tinypic.com/2v0dgf6.png

这是 HTML。容器div里面的内容重复了很多次。

<div id="ggd_forum_container">
  <div class="ggd_forum_box">
    <a href="#">
      <div class="ggd_forum_overlay" style="background-image:url(url.jpg)">
        <div class="ggd_forum_title">Title</div>
      </div>
    </a>
    <p>Description</p>
  </div>
</div>

这是css：

#ggd_forum_container {
display: -webkit-flex; /* Safari */
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
position: relative;
width: 100%;
max-width: 945px;
}

.ggd_forum_box {
width: 31.8%;
margin: 0 0 1% 2.3%;
}

.ggd_forum_overlay {
height: 140px;
margin-bottom: 5px;
background-size: auto 150px;
background-position: center;
position:relative;
-webkit-box-shadow:inset 0px 0px 0px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 0px 0px 0px 1px rgba(0,0,0,0.1);
box-shadow:inset 0px 0px 0px 1px rgba(0,0,0,0.1);
}

.ggd_forum_overlay:hover {
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.ggd_forum_title {
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 22px;
font-weight: 400;
line-height: 1.2;
color: #FFF;
bottom:0;
left:0;
width: 100%;
padding: 10px;
position: absolute;
text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.5)));
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5));
background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5));
background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5));
background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5));
background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5));
}

任何帮助将不胜感激！

【问题讨论】：

IE 8,9 不支持 flexbox，10 支持部分，11 支持
@wikijames 这也发生在 IE11 中。

标签： html css internet-explorer flexbox

【解决方案1】：

自 IE11 起才完全支持 Flexbox，要在 IE10 中使用它，您必须使用 2012 语法。在此之前，不支持 IE。

你应该在这里查看：http://caniuse.com/#search=flexbox

【讨论】：

IE11 中也出现了这种情况。