近日，我在用swiper插件寫一個手游官網時，出現了一個很奇怪的問題。問題如下
如上圖所示，這里是一個可以左右拖動的ul，每一個英雄介紹都是一個li標簽，上圖這是正常的情況。可是，它會隨機不定期不定時間不限次數的出現一種很奇怪的bug，比如
上圖是pc端查看的時候，11個li標簽組成的英雄介紹全部擠成一團。
這張圖是移動端查看的時候，又會出現相距甚遠的情況
而且，最主要的是，這種情況並不是一直都這樣子的，這個bug發作時間不規律，而且一刷新就好了，這也給我定位問題帶來了不小的難度
后來，我抓住一次bug重現的機會，仔細看了這一部分的代碼，我發現一個令我很在意的地方
我這里為了移動端自適應（該網站主要是面向移動端的），采用的是rem作為單位，而不是用px
但是，我在樣式里面發現竟然出現了px
帶着疑問與納悶，我再次檢查了我的代碼。
內聯樣式：沒有；
引入的swiper.css和我自己寫的樣式里面都沒有出現與這個相匹配的內容，就連element.style都沒有
我試着把li這里的屬性給勾選取消，結果網頁就恢復正常了，現在基本可以確定就是因為這個問題導致bug的出現
然而，這個element.style到底是什么？為什么因為這個東西會導致Bug?
我上網查了下，發現這個element.style是內聯樣式或者是js改寫代碼之后所留下的，剛才說過，內聯樣式沒有這方面的東西
那么，就只剩下js了，我先檢查了自己寫的js，沒問題，再一看swiper的js，懵逼了，因為，我用的是swiper.min.js
於是，我只能用最笨的辦法，修改下面的swiper的js代碼里面的參數
我發現，根據這里的修改，那個element.style里面的值也不停在變，slidesPerView: 后面的參數本來是代表着這一排會出現幾個li，數字越大，element.style里面的width越小，如果不寫，那么就是100%父元素的寬
后面一個就更簡單了，就是margin-right,參數是多少，就是多少個px的margin-righ;
原來，該問題的起因是因為swiper插件，會根據最外層的.swiper-container的寬度和slidesPerView: 后面的參數給li設置寬度，當我處在PC端時，屏幕寬度大概是1900+px，.swiper-container的寬度大概是1700+px，而且我這里的slidesPerView: 后面的參數是6，也就是說，一個li差不多是280+px左右，當我用谷歌瀏覽器里面的手機模擬器來看的時候，這幾個li標簽的寬度還是280+px，但是，我其他的使用的是rem，我的rem是隨着屏幕寬度的變化而變化，這樣問題就來了，li標簽的寬度是不會變的，刷新了頁面第一次生成多少就是多少（除非再次刷新頁面），但是我的其他dom的尺寸，卻隨着屏幕寬度大小在改變。所以才會出現我們看到的，超寬或者擠成一團的問題。
現在問題原因弄明白了，那么怎么解決呢？element.style根本就不存在啊，而且，引用swiper插件的那段代碼不能改，最主要的是，我的swiper插件用的是swiper.min.js，想改都沒辦法改啊？
其實解決的辦法很簡單，你們是否還記得一樣東西： ！important
沒錯，這個東西的作用就是提高指定CSS樣式規則的應用優先權。
也就是說：這個東西可以覆蓋掉element.style里面的屬性
直接在要覆蓋的樣式后面加上！important
最后：我不知道這個問題該分類到swiper插件上呢，還是該分類到其他地方，但是我覺得吧，以后在開發過程中，一定不要用xxxx.min.js 千萬不要在開發過程中用壓縮過的插件，不然出了問題，到時候真的很麻煩