IE11柔性問題與包裝內容

我有以下代碼，其中有四列使用flex包裝2行。在Chrome和Firefox中，這與第一個項目與第一個項目完全匹配，然後是第二個項目，所有項目都匹配該行中最高的項目。IE11柔性問題與包裝內容

但是，在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結構？

來源

2017-08-03 Pete

https://jsfiddle.net/5365ycpu/我在2行看到5塊，這是正確的嗎？ – Huangism

@Pete你的問題最有可能是因爲你有柔性容器，這也是一個彈性項目。在IE11中，這通常會給你帶來意想不到的結果。在規格中，它說這是好的，但我發現它在IE11上經常發生，我避免這樣做。你有很多代碼，我沒有IE11 – Huangism

不知道你是什麼意思塊元素，你到處都有flex容器，孩子們是auto flex項目。如果你可以簡化你的代碼，這將更容易弄清楚。現在有很多div和safari模擬ie11顯示了它自己的行中的所有內容。即使文本內容區域是彎曲的，他們看起來像他們可以只是正常的塊元素 – Huangism

您可以使用display: table替換大多數元素的flexbox，但.container除外。結果：

* { 
 
    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; 
 
}

<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>

來源

2017-08-03 14:42:00

嗯謝謝，但整個網站使用gridl，所以我將不得不重寫所有內容。這是我遇到的唯一問題。如果需要，我將把兩行分成不同的行，但是+1。 – Pete

@Pete我的錯，在這裏不需要'display：inline-block'。僅替換嵌套項目的flexbox。 –

在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中工作。

來源

2017-08-03 16:23:13

不幸的是，圖像需要通過寬度進行響應，所以我無法設置它們的高度 – Pete

我認爲這很重要。但這是與IE11的交易，這是一個因渲染問題而臭名昭着的瀏覽器。 –

IE11柔性問題與包裝內容

回答

相關問題