神祕的空白空間出現在Safari中的flexbox中

我試圖根據這個answer垂直對齊網格列。然而，輸出的右上角是一片神祕的空白，我不知道如何填充它。神祕的空白空間出現在Safari中的flexbox中

這是我在瀏覽器中看到（Safari瀏覽器版本9.1.2（11601.7.7））：

這裏是我的代碼：

.equal { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.equal > div[class^='col-'] { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
@media screen and (min-width: 768px) { 
 
    .equal2, 
 
    .equal2 > div[class*='col-'] { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex: 1 0 auto; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <!-- Bootstrap --> 
 
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="row equal"> 
 
     <div class="col-xs-6 col-lg-4"> 
 
     <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
 
      <p> 
 
     </div> 
 
     <div class="col-xs-6 col-lg-4"> 
 
     <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
 
      <p> 
 
     </div> 
 
     <div class="col-xs-6 col-lg-4"> 
 
     <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
 
      <p> 
 
     </div> 
 
     <div class="col-xs-6 col-lg-4"> 
 
     <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
 
      <p> 
 
     </div> 
 
     <div class="col-xs-6 col-lg-4"> 
 
     <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
 
      <p> 
 
     </div> 
 
     <div class="col-xs-6 col-lg-4"> 
 
     <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
 
      <p> 
 
     </div> 
 
     <div class="col-xs-6 col-lg-4"> 
 
     <p style="word-wrap: break-word;">Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. 
 
      <p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-09-25 Sun Qingyao

您可以在其他瀏覽器中通過重新創建這個（https://jsbin.com [放置在僞元素clearfix的內容不同的字符。]/zixabu /編輯？HTML，CSS，輸出）。刪除僞元素可以解決問題。 – misterManSam

所以這是一個不尋常的情況，這似乎是Safari獨有的。

但是在遊戲中使用巨大的Bootstrap風格，奇怪的事情可能會發生。

您在row wrap容器（row equal）中有一組彈性項目（div[class^="col-"]）。

每個項目有一個width: 50%,box-sizing: border-box和margin: 0，全部由Bootstrap應用。

由於填充和邊框包含在50％中，並且沒有邊距，所以每行都會放入兩個項目，每隔三個項目都會放入。這就是Chrome，Firefox，IE11和Edge所發生的情況。

然而，在Safari中，第二個Flex項目正在包裝中，在第一行留下一個大的開放空間。

在對代碼的粗略回顧中，沒有任何我能找到的建議此行爲的原因。（我沒有解決所有應用的Bootstrap風格。）

但仔細檢查呈現的佈局顯示在第一項的左邊空白處有一個微小的間隙（可能爲1px）。

這個額外的空間，只出現在Safari中，只在第一個flex項目旁邊，強制第二個項目打包。

參照圖像的上方，與所述容器的黃色背景顯示，而邊界中的第一列不對準，錯位是明顯的。

所以我認爲這個問題是可以識別的。

就解決方案而言，我現在可以建議的最好的方法是將第一個項目的大小減少1-2個像素，或者使用相同數量的負數margin-left。沿着這些路線的東西：

.equal > div[class^='col-']:first-child { 
    width: calc(50% - 1px); 
}

revised fiddle

來源

2016-09-25 21:41:40

謝謝！作爲一個反饋，應用'width：calc（50％ - 1px）;'產生另一個奇怪的佈局：[截圖]（http://i.stack.imgur.com/y1s53.png），但是'margin-left： - 1px;'只是給了我預期的結果：[截圖]（http://i.stack.imgur.com/rSUvd.png）。 –

神祕的空白空間出現在Safari中的flexbox中

回答

相關問題