就看運氣了

前幾天在項目中遇到了一個讓人摸不著頭腦的bug，測試說頁面顯示有點問題并發了截圖，

正常的顯示狀態是這樣

首先我自信地用自己的手機檢查了一下，沒有問題，問清楚后得知是UC瀏覽器中出現的，UC的內核是u3，基于webkit開發的，平時并沒有用過，應該是在細節處理上加了一些優化功能。

說回問題，第一眼看覺得可能是不同尺寸屏幕導致某個元素高度超出了，結果并不是這樣。找了一會兒，終于發現是那一塊的背景圖片沒有顯示。圖片并沒有報404，也沒有被其他屬性覆蓋， 而且上下文中的背景圖都能正常顯示，唯獨這個不顯示。

描述一下這個圖片吧，這是一個高度1px的圖片，兩端透明帶陰影效果，中間是白色背景的圖片。

設置的屬性是

background: url(../images/detail_middle.png) top repeat-y;

background-size: 100%;

（不知道經驗豐富的人看到這里能不能發現問題 …… ）

背景占滿屏幕，垂直方向repeat 在我看來屬性沒什么問題 為什么圖片就是不顯示呢？ 圖片放在其他元素上可以顯示，瀏覽器已經禁止了緩存，檢查沒有沖突屬性，background-color可以正常生效……

召喚度娘！

由于是只存在于UC中的兼容問題，所以首要懷疑對象肯定是這種亂七八糟的瀏覽器了。

查了查UC有沒有什么獨特的渲染機制，無果。

再精確點，查查UC對圖片加載，尤其是background相關屬性有沒有什么“特叔服務”，查到了一個可能的原因。

一些瀏覽器有廣告過濾功能，在渲染頁面時會自動將一些可能是廣告的元素剔除掉，我猜那張圖片有可能是由于這個原因沒被顯示出來。但是無論是標簽的class，id還是圖片的名字，都不包含廣告意味的字眼，換了一些名字 仍然不能糾正問題，不知道怎么改了，線索好像斷了。

此時我意識到了一件事，我該回家休息了~

運氣好的話明天可能它自己就好了也說不定呢。

回去的路上想了想，感覺不是廣告篩除的原因，因為同樣的元素加上這張背景圖都可以顯示。 那么到底是什么原因導致的這個問題？上一個下一個元素顯示都正常，只有這個有問題， 那應該仔細看看它們都有哪些區別就好了。

按著這個思路，第二天很快就發現了問題的根源。

在將background-size:100%改為contain后，問題解決了。

愉快地更新代碼，并且測試通過后，我開始考慮引發問題的原因。 現在我并不知道為什么這么改就沒有問題了。

首先區分一下background-size:100%,contain和cover這三者間的區別：

cover:圖片填滿整個容器，不變形；

contain:圖片在不超出容器的情況下放大到最大，不變形；

100%:圖片寬高設為容器的寬高的100%，可能會變形。

在我看來，在這個場景中，contain和100%的效果應該是一樣的，但是問題出在100%上。

background-size是CSS3新增的屬性，除了提供的cover和contain兩個屬性值外，還可以通過傳遞兩個參數 隨意設置寬度和高度，當只傳遞一個參數的時候，第二個參數為默認值，即auto。

而我想當然地以為background-size:100% 就等同于 background-size:100% 100% 了。

后來我又試了下，寫成 background-size:100% 100%確實也是沒問題的，而且如果這樣寫也就不再需要repeat-y了。

所以，問題就出在這里，在將background-size的縱坐標值設為auto的同時，將background-repeat設為repeat-y， 在UC瀏覽器中會出現背景圖片無法顯示的情況（大部分瀏覽器中還是不會有這種問題的），而造成這個問題的原因我就不再追查了，也許這種寫法本身就并不規范，UC在處理這種代碼的時候兼容性并沒有考慮到。以后還是不要出現這種寫法就好。

總結：

1，UC瀏覽器中background-repeat的repeat屬性不要與background-size的auto屬性同時運用，可能會無法顯示背景圖案；

2，background-size只傳一個值時，另一個值為默認的auto，并不像background-position等屬性一樣一個值可以當兩個值用；

3，如果只是記錄解決方法的話只要上兩條總結就夠了，這篇隨筆更主要的是記錄了我解決并理解問題的思路和過程，希望能對以后的我或者更多的小伙伴們起到幫助的作用。