解決swiper在ie9以下不相容問題

2022-05-05 01:51:12 字數 3433 閱讀 9380

之前用了swiper3做焦點圖,結果發現在ie8下不相容,然後換來了swiper2,發現還是不相容

swiper2在ie9以下沒有transition效果,所以自動降級成了js動畫,但是這個swiper2寫的有問題,焦點圖切換的速度沒有用,速度特別快,而且點選一次之後自動輪播也消失了。

於是想起了乙個辦法,在ie9以上用swiper2,ie9以下用其它焦點圖框架,就是判斷瀏覽器,然後呼叫不同的框架。

樣式的話,不同的瀏覽器在焦點圖父元素上加上不同的class名,這樣會對應不同的class名來找到需要的不同的樣式

slide.js的css:

.forie #lun2.forie .swiper-container .console.forie .swiper-container .pagination.forie .swiper-container .pagination ul li.forie .swiper-container .pagination ul li.active.forie .swiper-container .swiperbtn.forie .swiper-container .swiperbtn:hover.forie .swiper-container .swiperbtn i.forie .swiper-container #prevbtn.forie .swiper-container #nextbtn.forie .swiper-container .slidedetail.forie .imgtovideo img.forie .imgtovideo>div.forie .imgtovideo>div:hover .imgtovideodetail.forie .imgtovideo .imgtovideodetail.forie .imgtovideo .imgtovideodetail >div.forie .imgtovideo .tovideo .imgtovideodetail.forie .imgtovideo .tovideo .imgtovideodetail >div.forie .imgtovideo .imgtovideodetail .fa-search.forie .contentiv

這是比較笨的一種方法,如果有相容ie8以下並且在高版本瀏覽器上效果還不錯的框架歡迎分享

ie9以下相容background size屬性

我們知道background size是css3屬性,其瀏覽器相容性如下圖 w3school 解決這個問題需要在css中增加 filter progid dximagetransform.microsoft alphaimageloader src surl,sizingmethod ssize 其...

IE9以下相容 font face的處理方案

之前遇到了ie8 下iconfont 字型圖示不渲染的問題,查詢資料後解決了這個問題,現在在此記錄下來 webkit safari 3.2 truetype opentype tt ttf opentype ps otf opera 10 truetype opentype tt ttf opent...

IE9以下版本相容h5標籤

隨著html5 後面用h5代表 標籤越來越廣泛的使用,ie9以下 ie6 ie8 不識別h5標籤的問題讓人很是煩惱。在火狐和chrome之類的瀏覽器中,遇到不認識的標籤,只要給個display block屬性,就能讓這個元素成為乙個類似div的元素,但是到ie上就很噁心了,它不認識就是不認識,你在h...