跳到主要內容
黯羽輕揚每天積累一點點

Chrome下樣式相容性問題

免費2015-06-09#Solution#浏览器默认样式#Chrome样式兼容

最近偶爾發現首頁的簽到日曆變得特別醜,在 Chrome 28 和 Chrome 43 下都看到過,而 Firefox 和 IE6-8 下一切正常,仔細檢查才發現是瀏覽器預設樣式在搗亂

##一.問題

偶爾發現簽到日曆變成這個樣子了:

ugly

之前還沒有出現這種樣式(本來應該是整齊排列的日曆格子),可能與最近檢查更新有關,Chrome 28 檢查更新,更新失敗後好像就出現了這種問題

Chrome 43 好像從一開始就有這問題,當時還很奇怪為什麼 Chrome 新版本會不相容舊版本,這可不像 Google 的風格

##二.原因

自認為樣式沒有問題,上線的時候是相容 IE6+、Chrome 28、FF 的,出現這種問題肯定不是樣式寫錯了

從圖片中可以看到畫圈的格子樣式都錯了,而沒畫圈的格子樣式正確,仔細對比發現二者的區別僅僅是畫圈的格子多一個 check 類別而已。奇怪的是,查看元素,禁用 check 樣式沒有用(check 樣式只是設置了張背景圖片),百思不得其解。。

把樣式列表往下拉了拉後竟然看到了另一個 check:

check

沒錯,這就是罪魁禍首,醜醜的日曆就是它造成的。瀏覽器預設樣式竟然有叫 check 的,好歹加個前綴吧。。

##三.解決方案

網友給出的比較科學的方案是:

-webkit-appearance:none; /* 去除默认样式 */

但它好像並沒有生效

好吧,我們可以用最直接的方式:換個 class 名,check 給你,我不要了

###後話

Chrome 為什麼會自帶這麼奇怪的預設樣式?讓人很是不解

評論

暫無評論,快來發表你的看法吧

提交評論