html - Internet Explorer 忽略 flexbox 容器的宽度

Question

我正在工作的网站有一个响应式网格布局，这是我用 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));
}

如有任何帮助，我们将不胜感激!

Answer 1

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

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