我已經被困了一個多星期，找不到關于這個話題的任何適當的解決方案或解釋。
我在這里有這個基于 flexbox 的水平滾動輪播：https ://codevelop.at/flexbox/single.php
它在 Chrome 中按預期作業，中間有正確的空間（邊距）。如果您在 Firefox 中呼叫相同的 URL，它會給我這些很大的利潤。這是由于height: 100%在<section>主標簽內的標簽上。如果我洗掉它，它可以作業，但是影像沒有正確調整大小。
有任何想法嗎？提前致謝
鉻（按預期）：
Firefox（我卡住的地方）：
uj5u.com熱心網友回復：
您的問題是 CSS 的這一部分：
.single-project .second-section img, .single-project .third-section img, .single-project .fourth-section img, .single-project .fifth-section img {
height: 100%;
width: auto;
}
在這種情況下，似乎 Firefox 與 Flexbox 結合使用無法像 Chrome 那樣正確計算寬度。它占用了原始影像寬度的空間，并且無法正確重繪。這就是您所看到的太多空白。
你可以嘗試這樣的事情：
width: 400px;
height: 100%;
object-fit: cover;
雖然這不是一個完美的解決方案，但它是一個快速的解決方案。您可以使用 Javascript 計算完美的影像尺寸以獲得更理想的解決方案。
那是一個棘手的問題。;-)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/497427.html
上一篇：Firefox中的影片滯后