問題描述
我絕對撕裂了我所有的頭髮，這是我遇到的這個非常令人沮喪和奇怪的 CSS 問題。
我正在使用 Bones boilerplate 做一個網站，一直很棒，直到現在…
它使用流體網格系統，我最近試圖建立一個簡單的畫廊，我已經做成一個網格 (4 影像，每個包裹在四分之一列，第一個/最後一個類新增到第一/最後的影像) 。
如果您將滑鼠懸停在影像上 (由於某些原因尤為明顯)，您會注意到，由於某些瘋狂的原因，它們可以將寬度更改為一個或兩個畫素。影像設定為 max-width：100％，我有一種感覺，這是某種原因的罪魁禍首，因為如果您給影像一個”fixed” 寬度 (例如.gallery-icon img {max-width：165px;}，它修復了這個問題，但作為一個流體網格系統，我不能去那條路線，因為如果調整瀏覽器的大小，影像保持 165px，即使我根據媒體設定 4 種不同的寬度，介質尺寸之間的影像將不會正確對齊。
如果不是過渡效應問題 (如果我關閉轉換，影像較低的不透明度，但沒有動畫)，它將工作，因為我想要它的工作:(
請幫忙！
這是一個空白的演示網站，其骨架樣板執行，只不過是頁面上的畫廊。讓我知道，如果你看到搖擺的問題。
(我無法在 jsfiddle 上重新建立它，所以我把它安裝在我躺在呵呵的舊域名上)
編輯：我剛剛注意到，這個問題似乎發生在寬度和高度上都大於 div 的影像上。影像 1 + 3 是這個，他們有 bug，而影像 2,4 似乎是好的？而影像 2 + 4 的高度比 div 更小….. 但即使我將影像設定為 max-height，問題仍然存在。
EDIT2：新增了一個快速的影片來顯示問題 (最新的 Firefox 和 Chrome)http://www.youtube.com/watch?v=uL81hLfMvvw
最佳解決方案
我會說這是 Chrome 中的一個錯誤 (我使用的是 24.0.1312.57 m) 。
問題不是真的在影像 1 + 3，我已經看到它在影像 2 。
我認為，當您的影像的寬度是分數 (例如 146.71 畫素) 時，會出現此問題。在固定顯示中，它被四捨五入到 146 畫素。在轉換過程中，向上舍入 (更正確！) 到 147 畫素。
次佳解決方案
感謝 pointing out the GPU aspect 的 val … 這提醒我這個 CSS-Snippet，這傾向於解決 Chrome 渲染問題：
-webkit-transform: translateZ(0);
我已經將這個應用於容器 (div.post)，其中包含有分數寬度的問題專案 (i.icon-)，問題解決了！
信用：我從 this answer 得到這個解決方案，修復導航到頁面錨點後不正確渲染 (固定) 的元素。
第三種解決方案
使用以下 css 提示將受影響的元素升級到新的複合圖層 (它解決了同樣的確切問題)：
.<your-css-selector> {
will-change: <css style about to change. example: opacity>;}
這表示合成器將元素的塗料過程隔離成新的複合層。在 chrome 開發工具中檢查圖層時，您可以確保元素已被提升，從而解決問題。該元素將出現在一個新的層中，具有以下 「合成原因：具有活動的加速動畫或轉換。有一個 will-change 合成提示。
看起來像透過這種方式將元素提升到新層之後，瀏覽器能夠正確地呈現轉換的最終狀態。
伊萬。
第四種方案
在 link 上，您可以找到 Mozilla bug 的解決方案。
您需要新增 1 個 CSS 規則：
-moz-backface-visibility: hidden;
參考文獻
注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。