IE11 flex包装内容的问题

时间：2017-08-03 14:10:52

标签： css css3 internet-explorer flexbox

我有以下代码，其中有四列使用flex包裹在2行上。在chrome和firefox中，这与第一个项目完全匹配，第一个项目是自己的行，然后是第二行，所有项目都匹配该行中最高的项目。

然而，在IE11中，第二行中的项目与所有4个中的最高项目匹配（而不仅仅是在它自己的行上），这意味着在第二行中创建了大量空白区域。

* {
  box-sizing: border-box;
}

img {
  display: block;
  width: 100%;
}

.grid-container {
  padding-left: 0;
  padding-right: 0;
  margin-right: 0;
  margin-left: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 0 1 auto;
}

.grid-column {
  padding-right: 12px;
  padding-bottom: 24px;
  padding-left: 12px;
  flex-basis: 100%;
  flex: 0 0 auto;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  flex-direction: column;
  display: flex;
}

.grid-column:nth-child(1) {
  min-width: 100%;
  max-width: 100%;
}

.grid-column:nth-child(2) {
  min-width: 50%;
  max-width: 50%;
}

.grid-column:nth-child(3),
.grid-column:nth-child(4) {
  min-width: 25%;
  max-width: 25%;
}

.grid-column:nth-child(1) {
  min-width: 100%;
  max-width: 100%;
}

.widget-article {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.grid-column:nth-child(1) .widget-article {
  flex-direction: row;
}

.widget-article__content {
  background: #313B3D;
  color: #ffffff;
  flex-grow: 1;
}

.widget-article__content a {
  color: #ffffff;
}
<div class="grid-container grid-container--listing grid-container--full-half-quarter">
  <div class="grid-column">
    <div class="widget-article widget-article--full widget-article--featured widget-article--theme-3">
      <div class="media-asset">
        <a href="#">
          <img src="http://via.placeholder.com/986x553" alt="">
        </a>
      </div>
      <div class="widget-article__content">
        <div class="widget-article__header">
          <h3 class="widget-article__title">
            <a class="widget-article__title-link" href="#">
                        Crash-tested landscape furniture: why functional will no longer do...
                </a>
          </h3>
        </div>
        <div class="widget-article__footer">
          <div class="widget-article__meta">
            <div class="widget-article__meta-left">
              <div class="meta-details">
                <div class="meta-details__author">
                  <p><a class="meta-details__author-link" href="#">CHRISTOPHER HAINES</a></p>
                </div>
                <div class="meta-details__date">
                  <p>MONDAY 5TH JUNE, 2017</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-column">
    <div class="widget-article widget-article--full widget-article--featured widget-article--theme-3">
      <div class="media-asset">
        <a href="#">
          <img src="http://via.placeholder.com/986x553" alt="">
        </a>
      </div>
      <div class="widget-article__content">
        <div class="widget-article__header">
          <h3 class="widget-article__title">
            <a class="widget-article__title-link" href="#">
                        Crash-tested landscape furniture: why functional will no longer do...
                </a>
          </h3>
        </div>
        <div class="widget-article__footer">
          <div class="widget-article__meta">
            <div class="widget-article__meta-left">
              <div class="meta-details">
                <div class="meta-details__author">
                  <p><a class="meta-details__author-link" href="#">CHRISTOPHER HAINES</a></p>
                </div>
                <div class="meta-details__date">
                  <p>MONDAY 5TH JUNE, 2017</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-column">
    <div class="widget-article widget-article--full widget-article--featured widget-article--theme-3">
      <div class="media-asset">
        <a href="#">
          <img src="http://via.placeholder.com/986x553" alt="">
        </a>
      </div>
      <div class="widget-article__content">
        <div class="widget-article__header">
          <h3 class="widget-article__title">
            <a class="widget-article__title-link" href="#">
                        Crash-tested landscape furniture: why functional will no longer do...
                </a>
          </h3>
        </div>
        <div class="widget-article__footer">
          <div class="widget-article__meta">
            <div class="widget-article__meta-left">
              <div class="meta-details">
                <div class="meta-details__author">
                  <p><a class="meta-details__author-link" href="#">CHRISTOPHER HAINES</a></p>
                </div>
                <div class="meta-details__date">
                  <p>MONDAY 5TH JUNE, 2017</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-column">
    <div class="widget-article widget-article--full widget-article--featured widget-article--theme-3">
      <div class="media-asset">
        <a href="#">
          <img src="http://via.placeholder.com/986x553" alt="">
        </a>
      </div>
      <div class="widget-article__content">
        <div class="widget-article__header">
          <h3 class="widget-article__title">
            <a class="widget-article__title-link" href="#">
                        Crash-tested landscape furniture: why functional will no longer do...
                </a>
          </h3>
        </div>
        <div class="widget-article__footer">
          <div class="widget-article__meta">
            <div class="widget-article__meta-left">
              <div class="meta-details">
                <div class="meta-details__author">
                  <p><a class="meta-details__author-link" href="#">CHRISTOPHER HAINES</a></p>
                </div>
                <div class="meta-details__date">
                  <p>MONDAY 5TH JUNE, 2017</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- / column -->
</div>

有没有办法让IE的行为像chrome和firefox而不改变html结构？

2 个答案:

答案 0 :(得分：1)

您可以使用.container替换除display: table以外的大多数元素的flexbox。结果：

＆＃13;
＆＃13; 
* {
  box-sizing: border-box;
}

img {
  display: block;
  width: 100%;
}

.grid-container {
  padding-left: 0;
  padding-right: 0;
  margin-right: 0;
  margin-left: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 0 1 auto;
}

.grid-column {
  padding-right: 12px;
  padding-bottom: 24px;
  padding-left: 12px;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.grid-column:nth-child(1) {
  min-width: 100%;
  max-width: 100%;
}

.grid-column:nth-child(2) {
  min-width: 50%;
  max-width: 50%;
}

.grid-column:nth-child(3),
.grid-column:nth-child(4) {
  min-width: 25%;
  max-width: 25%;
}

.grid-column:nth-child(1) {
  min-width: 100%;
  max-width: 100%;
}

.widget-article {
  display: table;
  height: 100%;
}

.widget-article > * {
  display: table-row;
}

.grid-column:first-child .widget-article > * {
  display: table-cell;
  vertical-align: top;
}

.widget-article__content {
  background: #313B3D;
  color: #ffffff;
  height: 100%;
}

.widget-article__content a {
  color: #ffffff;
}
＆＃13; 
<div class="grid-container grid-container--listing grid-container--full-half-quarter">
  <div class="grid-column">
    <div class="widget-article widget-article--full widget-article--featured widget-article--theme-3">
      <div class="media-asset">
        <a href="#">
          <img src="http://via.placeholder.com/986x553" alt="">
        </a>
      </div>
      <div class="widget-article__content">
        <div class="widget-article__header">
          <h3 class="widget-article__title">
            <a class="widget-article__title-link" href="#">
                        Crash-tested landscape furniture: why functional will no longer do...
                </a>
          </h3>
        </div>
        <div class="widget-article__footer">
          <div class="widget-article__meta">
            <div class="widget-article__meta-left">
              <div class="meta-details">
                <div class="meta-details__author">
                  <p><a class="meta-details__author-link" href="#">CHRISTOPHER HAINES</a></p>
                </div>
                <div class="meta-details__date">
                  <p>MONDAY 5TH JUNE, 2017</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-column">
    <div class="widget-article widget-article--full widget-article--featured widget-article--theme-3">
      <div class="media-asset">
        <a href="#">
          <img src="http://via.placeholder.com/986x553" alt="">
        </a>
      </div>
      <div class="widget-article__content">
        <div class="widget-article__header">
          <h3 class="widget-article__title">
            <a class="widget-article__title-link" href="#">
                        Crash-tested landscape furniture: why functional will no longer do...
                </a>
          </h3>
        </div>
        <div class="widget-article__footer">
          <div class="widget-article__meta">
            <div class="widget-article__meta-left">
              <div class="meta-details">
                <div class="meta-details__author">
                  <p><a class="meta-details__author-link" href="#">CHRISTOPHER HAINES</a></p>
                </div>
                <div class="meta-details__date">
                  <p>MONDAY 5TH JUNE, 2017</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-column">
    <div class="widget-article widget-article--full widget-article--featured widget-article--theme-3">
      <div class="media-asset">
        <a href="#">
          <img src="http://via.placeholder.com/986x553" alt="">
        </a>
      </div>
      <div class="widget-article__content">
        <div class="widget-article__header">
          <h3 class="widget-article__title">
            <a class="widget-article__title-link" href="#">
                        Crash-tested landscape furniture: why functional will no longer do...
                </a>
          </h3>
        </div>
        <div class="widget-article__footer">
          <div class="widget-article__meta">
            <div class="widget-article__meta-left">
              <div class="meta-details">
                <div class="meta-details__author">
                  <p><a class="meta-details__author-link" href="#">CHRISTOPHER HAINES</a></p>
                </div>
                <div class="meta-details__date">
                  <p>MONDAY 5TH JUNE, 2017</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-column">
    <div class="widget-article widget-article--full widget-article--featured widget-article--theme-3">
      <div class="media-asset">
        <a href="#">
          <img src="http://via.placeholder.com/986x553" alt="">
        </a>
      </div>
      <div class="widget-article__content">
        <div class="widget-article__header">
          <h3 class="widget-article__title">
            <a class="widget-article__title-link" href="#">
                        Crash-tested landscape furniture: why functional will no longer do...
                </a>
          </h3>
        </div>
        <div class="widget-article__footer">
          <div class="widget-article__meta">
            <div class="widget-article__meta-left">
              <div class="meta-details">
                <div class="meta-details__author">
                  <p><a class="meta-details__author-link" href="#">CHRISTOPHER HAINES</a></p>
                </div>
                <div class="meta-details__date">
                  <p>MONDAY 5TH JUNE, 2017</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- / column -->
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

IE11中的问题是它使用图像的固有高度。

虽然您已设置图像容器的宽度：

.grid-column:nth-child(1) {
  min-width: 100%;
  max-width: 100%;
}

.grid-column:nth-child(2) {
  min-width: 50%;
  max-width: 50%;
}

.grid-column:nth-child(3),
.grid-column:nth-child(4) {
  min-width: 25%;
  max-width: 25%;
}

...这足以使布局在Chrome和Firefox中运行，这些规则不足以改变IE11中图像的自然尺寸。

因此，请考虑在代码中添加以下内容：

 /* pixel units for illustration purposes only */

.grid-column:nth-child(2) img {
  height: 250px;
}

.grid-column:nth-child(3) img,
.grid-column:nth-child(4) img {
  height: 125px;
}

jsFiddle demo

百分比高度可能比像素更好，但这需要一些工作设置高度的祖先。由于我不确切地知道你想要什么，我只是使用像素进行演示。您可以使用其他尺寸选项。

但最重要的是，您需要覆盖图像的内在尺寸，以便在IE11中使用布局。

相关问题
最新问题