Question

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

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

这就是它在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

Internet Explorer忽略Flexbox容器的宽度

1 个答案: