css 樣式加載的優(yōu)先級使用經(jīng)驗(yàn)分享

2024-08-30 08:35:28

字體：大中小

供稿：網(wǎng)友

昨天項(xiàng)目開發(fā)過程中，遇到一個樣式加載優(yōu)先級的問題。

定義了class，在頁面最初加載的過程中是被識別出來了，當(dāng)加載完畢后的一瞬間，樣式像被重寫了一樣，定義好的margin-bottom不起作用了。控件因?yàn)闆]有這個樣式就擠在了一起。

測試中FF和Chrome都是可以的，IE8有問題，但是用IE developer工具是可以看到這個margin-bottom被識別出來了，也沒有被重定義。

問題比較怪異。

這個頁面不是普通的結(jié)構(gòu)，頁面內(nèi)容是異步生成的，而不是之前已經(jīng)寫好各種元素的普通頁面。至于在加載完的一瞬間是被什么給重定義了還沒有找到原因。現(xiàn)象是其中的擠在一起的表單元素隨便點(diǎn)擊一個，它所在的模塊的所有表單都會加載margin-bottom樣式，就不會再擠在一起。或者用IE developer工具，先把margin-bottom前面的勾點(diǎn)擊為不選，然后再點(diǎn)擊選中，這樣頁面上所有沒有識別margin-bottom的表單元素都會正常加載這個樣式。

但這肯定不是解決問題的辦法，不能讓客戶看到這個問題，UI是最能打動用戶的部分，也是最容易激怒用戶的部分。

隨后試了幾種方法，專門寫一個樣式定義margin-bottom，而不是隨著別的定義一起，不行；

加!important這種優(yōu)先級很高的辦法也不行；

直接寫style優(yōu)先級還不如!important，并且代碼冗余太多，弊端更多，不行；

然后試了一個方法，script的方法，可行，代碼如下：

復(fù)制代碼

上一篇：讓HTML和JSP頁面不緩存從Web服務(wù)器上重新獲取頁面

下一篇：搜索文本框焦點(diǎn)離開時文本位置跳動問題解決方法