大圖像溢出：隱藏;不要集中在Firefox

Question

我試圖擺脫水平滾動條（A），但當我改變我的頁腳我的圖像弄亂了（B），我不知道發生了什麼或者什麼做。

答：不需要的水平滾動：https://mabonzo.github.io/prj-rev-bwfs-tea-cozy/teacozy/

B：註釋掉頁腳和圖片去靠不住的：從具有left: 20px;到margin-left: 20px;或padding-left: 20px;時https://mabonzo.github.io/prj-rev-bwfs-tea-cozy-test/teacozy/

起初，我試圖改變我的頁腳規則集我遇到了這個問題！我推測它與圖像的實際分辨率有關，但我不確定。

調整瀏覽器修復的大小以圖像爲中心。

我問Slack組無效，我只是在不同的瀏覽器上測試它，似乎這只是Firefox的問題。在Chrome和Edge上，它們加載沒有問題...所以我想我的更新問題是如何爲Firefox用戶解決這個問題。

編輯：要更新網站，所以問題不會在（A）鏈接。但測試網站（B）仍然會被打破。謝謝！

Answer 1

Firefox可能只是在display: flex; position: relative; justify-content: center; align-items: center; divs渲染position: absolute;圖像怪異！

我通過將align-self: flex-start;和top: 0;聲明添加到.mission-child img和.locations-child img規則集中解決了此問題。

謝謝你的幫助！

Answer 2

你footer元素有一個auto寬度（也就是屏幕的整個寬度，因爲它是一個塊級元素），但是你說left: 20px（與position:relative結合），所以現在它的屏幕的全寬，但它啓動從左邊20px，這意味着它總是在屏幕右側20px。

padding-left:20px對footer將實現相同的目標，並不會導致水平滾動條。

Answer 3

您的圖像似乎默認爲在Firefox的左邊，因爲您有position: absolute在.mission-child img。設置爲position: relative似乎正確地集中了我的圖像。

除了上面有left: 20px之外，您的頁腳佔據了頁面的全部寬度。這個從左側偏移，導致它的總寬度爲100% + 20px。爲了抵消文本中包含的文本，而不是頁腳本身，您正在尋找padding-left: 20px。

希望這會有所幫助！ :)