Safari在右側用100％寬度的網格留下空間

Question

我試圖讓自己的網格適合我的需求，但是我找不到一種方法在Safari中使其成爲全寬（Mac & iOS版）。它在其他瀏覽器（Chrome，Firefox，IE10）中運行良好，但在Safari和Safari移動版中，它在右側留下空間。

有沒有解決方案？我是一個像素完美主義者，所以這讓我非常沮喪。

圖像預覽：

演示：http://codepen.io/PatrickVerwoerd/pen/wImcu

Answer 1

這是一個子像素四捨五入錯誤。它在任何流體佈局中都很常見，但是當你反覆做同樣的數學（連續12個相同的列）時，它就變得非常明顯。當你有一個流體佈局時，有時候你的容器（以像素爲單位）不會按照你設定的百分比均勻分配。假設視口寬度爲966px，並且您的列爲10%。這意味着每列應該是96.6px寬。瀏覽器只是不知道如何處理該部分像素。如果您調整容器大小，則會看到現在和之後的版本跳轉，並且當容器可以被整除時，排列完全正確。

這是一個old problem，瀏覽器在處理它時已經大有改進。 IE過去總結，這導致更糟糕的佈局問題。現在，大多數瀏覽器都比較聰明，但Safari仍然下滑。

無法完全解決問題。 沒有像素精確，流暢，浮動的佈局，但有幾種解決方法。我從最簡單，並通過列表的工作我的方式：

1. 如果可能的話，避免重複的百分比。任何一個元素都只會圍繞一個部分像素，這意味着您一次不會有超過1px的錯誤。如果你不堆疊錯誤，他們更容易隱藏。

2. 將最後一行浮動到右側。這會在兩列之間移動舍入錯誤，通常不太明顯。

3. 如果你真的不能最小化或隱藏錯誤，例如在圖庫式佈局中，請嘗試Jon Albin Wilkins的float isolation method。這是一個龐大的方法，所以我不推薦它到處都是，但在某些情況下它可能是真正有用的。像Susy和Singularity這樣的佈局系統也會給你這個選項。

結合使用這些技術，您可以將所有舍入誤差保留爲單個像素。如果您的設計無法處理單個像素舍入誤差，則不應使用流體浮點數，或者應該考慮Dao。 :)

Answer 2

的問題是，SCSS在CodePen被計算所述餘量和寬度到一定水平小數。

/* Actual Math */ 
53px/966px * 100 // = 5.486542443% 

/* Codepen Math */ 
53px/966px * 100 // = 5.48654% 

正如你可以看到剩餘的小數將被忽略，因此您的電網技術上不增加高達100％，因此在後面加上一個空格。

看來其他的瀏覽器被假設你的意思，而Safari瀏覽器正在被越來越準確，延長整整100％（不管是正確的appraoch將取決於你想要什麼來實現）補償這一點。