2012-12-10 41 views
6

最近,我發現第二次在Chrome瀏覽器中正常顯示的網頁不再這樣做了,而且我的結局沒有任何變化。我甚至無法鎖定,其中 Chrome出問題了。我會舉出我的例子,並感謝您的任何建議,提示或解決方案!Chrome瀏覽器中的CSS顯示問題:background-image&position

背景圖像 網站saversetter.com使用縱向平鋪背景圖像(一個或多個)。 Chrome不再顯示它們。在Firefox或IE中查看漸變背景可見。 Chrome在幾個月前正確顯示了這一點。

位置 滾動到頁面上deadlynightshades.com底部,將鼠標懸停在求變者那裏。直到幾個星期前,Chrome和所有瀏覽器纔將標題顯示在中心位置。然後突然,我知道現在,Chrome 單獨開始錯誤地定位標題。我在Chrome中修正了這個問題,只是爲了在其他瀏覽器中打破它,就是現在的樣子。這個例子目前在Chrome中看起來不錯,但不應該。查看Firefox或IE中的縮放器,查看錯誤對齊標題的外觀。

這些頁面在Chrome中工作,然後突然不再正確顯示,在我的結尾沒有任何已知的更改。在其更新中,Chrome是否徹底改變了涉及背景圖像或絕對位置的規則的CSS顯示?

附錄:這個問題Is there a bug in Chrome's CSS visibility rendering?看起來與我的zoomer問題相關,對不起,我沒有更早發現它!

解決方案:抱歉問這個,然後找出我自己的解決方案。要求幫助我解決問題,但我會在將來更加小心你的時間! 位置問題是通過指定一個百分比位置,而不是一個像素位置,在由jquery創建的用於動畫標題的css中修復的。沒有通用的解決方案,或者改變了Chrome。無法在測試環境中重現,因此除了Chrome中的更改外,它還是關於我的頁面的。

關於背景圖像顯示,Chrome有背景大小的問題。

background-size: 25% auto;正在縮小爲background-size: 25%;並且25%正在重新使用不正確的高度和寬度。我將「自動」更改爲「100%」,Chrome開始顯示一個像素高的圖像。在這種情況下,auto的含義尚不清楚,我不知道爲什麼我用它開頭,但Firefox和IE將其渲染爲圖像的大小,而Chrome似乎使用其他定義的值來表示兩個尺寸。

+0

您使用的是哪個版本的Chrome? – ProdigyProgrammer

+0

我在撰寫本文時使用版本24.0.1312.35 beta-m – rabidrobot

+0

對於提出有關現有網頁而不是jsfiddle的問題,我表示抱歉。當我從像素定位切換到百分比時,請忽略縮放/位置問題,即使我不知道舊方法爲什麼不這樣做,也能夠做到這一點。 – rabidrobot

回答

0

我只是想發佈您的解決方案,以便發現它很明顯,並且任何正在尋找答案的人都不會錯過它。它看起來有點隱藏在你的問題。

位置問題是通過指定一個百分比位置,而不是像素位置,在由jquery創建的css中爲動畫標題創建的。沒有通用的解決方案,或者改變了Chrome。無法在測試環境中重現,因此除了Chrome中的更改外,它還是關於我的頁面的。