CSS：本地主機和服務器之間的對齊更改

我正在製作一個具有旋轉背景圖像的網頁。在本地主機上開發，我安排了一些東西，讓圖像中的人物定位在我想要的位置。但是，當我推送到服務器並在不同瀏覽器中打開網頁時，有些人不在屏幕上，並且結果因瀏覽器而異。CSS：本地主機和服務器之間的對齊更改

這是我使用

.animate-this .img1, 
.animate-this .img3 { 
    clear: left; 
    display: block; 
    width: 100%; 
    height: 1210px; 
    margin-left: auto; 
    margin-right: auto; 

} 
.animate-this .img2 { 
    clear: left; 
    display: block; 
    width: 1620px; 
    height: 1210px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #2b292b; 
    background-repeat: no-repeat; 

} 

.animate-this .img4 { 
    clear: left; 
    display: block; 
    width: 1522px; 
    height: 1210px; 
    background-color: #2b292b; 
    background-repeat: no-repeat; 

}

來源

2012-08-27 Leahcim

請附上您的html。 – Narendra

在您的服務器CSS和您的本地CSS上運行差異。另請檢查您部署的背景圖像是否與本地版本相同。這很可能是您的部署方法中的一些錯誤。 – Duopixel

@Rain你知道Ruby on Rails嗎？很難顯示HTML而沒有發佈來自不同文件，並且問題在於背景圖像正在隨着javascript而改變。但是，你可以看看服務器上的應用程序在sugarpova.herokuapp.com – Leahcim

我檢查你所提供的鏈接的CSS。我認爲下面的CSS可能會有所幫助。

.animate-this .img1, 
.animate-this .img3 { 
    clear: left; 
    display: block; 
    width: 100%; 
    height: 1210px; 
    margin-left: auto; 
    margin-right: auto; 

} 
.animate-this .img2 { 
    clear: left; 
    display: block; 
    width: 100%; 
    height: 1210px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #2b292b; 
    background-repeat: no-repeat; 

} 

.animate-this .img4 { 
    clear: left; 
    display: block; 
    width: 100%; 
    height: 1210px; 
    background-color: #2b292b; 
    background-repeat: no-repeat; 

}

此外，我還注意到您的網頁中有一件事。每次滾動它都會在頁面中添加3-4頁圖像，這些圖像已經存在於您的頁面中。這將使頁面變得沉重，因爲這些圖像非常大。所以請看看你是否可以滾動圖像而不必重複添加到頁面。

來源

2012-08-27 07:01:09 Narendra

謝謝，但如果我使頁面滾動圖像將不會自動切換，並且由於頁面添加相同的圖像，它不會使它更重，因爲圖像應該被緩存，不是嗎？ – Leahcim

我不確定緩存如何在Ruby on Rails中工作。我知道這是如何在.NET中工作的。通常，對於每個圖像瀏覽器分別向服務器發送請求。 – Narendra

CSS：本地主機和服務器之間的對齊更改

回答

相關問題