問題描述:
這個問題是一個同事在寫手機頁面用UC瀏覽器測試以后遇到的,其他瀏覽器靜態頁面顯示正常,唯獨UC瀏覽器不顯示頁面樣式。
我測試過代碼是沒有問題的,因為臨時沒有找到安卓手機,就猜想PC端的應該跟手機端會有同樣的問題,畢竟是同樣的內核嘛。
然而PC上用UC瀏覽器看或者自帶的手機模擬器都沒有任何問題,唯獨手機上不行。
解決方法:如下圖,審查元素發現,尼瑪,居然UC瀏覽器默認給head加了一個dislay:none;隱藏屬性,然后試着把引入的css文件放在head之外,就可以正常顯示了。
不過據同事反映,雖然能夠顯示頁面了,但是用了定位和浮動屬性的地方,顯示還是會亂,應該是UC瀏覽器本身不支持的原因
百度的UC瀏覽器不支持css屬性的截圖
注:最近無意發現在PC端上類似的情況,引入css以后,所有樣式都沒有生效,確認路徑是對的,代碼也沒有錯。
后來發現,一般用link標簽引入的css樣式格式為:<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
如果你省略了 rel="stylesheet" type="text/css",只有后面的路徑,經測試,就會造成瀏覽器無法解析,並設置默認隱藏樣式,如下圖
所有建議還是不要省略,不過引入JS是可以省略的,不用寫成<script src="" type="text/javascript" charset="utf-8"></script>,直接引入就可以<script src="js/new_file.js"></script>