广告
淘宝内部优惠券
当前位置: 开发异常方案库» Web 开发 » css ie8兼容问题

css ie8兼容问题

开发异常方案库  收集整理于:2020-05-09 09:35:00  浏览:66次
现在给客户做网站基本都是以IE11  CHROME内核 同时测试firefox/safari,能通过就交付 但是现在碰到一个客户,他们用的是内网,内网大部分电脑是IE8,我做的网站别的问题没有,轮播图(jquery+pgwSlider)在IE8下显示不正常,如下所示,大佬能帮忙看下吗? 这个是正常的,右侧的缩略图正常显示 这个是IE8打开的,缩略图只显示了一点点 css如下:
.pgwSlider{width:98%;margin:auto}.pgwSlider .ps-current{float:left;width:80%;overflow:hidden;height:inherit;position:relative;font-size:1rem;}.pgwSlider .ps-current span{position:absolute;width:100%;padding:8px 10px 10px;background:rgba(0,0,0,0.7);left:0;bottom:0;color:#fff}.pgwSlider .ps-current img{max-width:100%;min-width:100%;height:227px;display:block}ul.pgwSlider,.pgwSlider>ul{float:right;width:19%;padding:0;list-style:none;margin:0;}ul.pgwSlider>li,.pgwSlider>ul>li{height:50px;margin-bottom:6px;overflow:hidden;position:relative;opacity:.6;filter:alpha(opacity=60);font-size:.8rem}ul.pgwSlider>li:last-child,.pgwSlider>ul>li:last-child{margin-bottom:0}ul.pgwSlider>li span,.pgwSlider>ul>li span{display:block;width:100%;position:absolute;bottom:0;padding:3px 0 5px 5px;color:#fff;background:rgba(0,0,0,0.7);overflow:hidden;text-overflow:ellipsis}ul.pgwSlider>li:hover,.pgwSlider>ul>li:hover{opacity:1 !important}ul.pgwSlider>li img,.pgwSlider>ul>li img{width:100%;min-height:100%;display:block}@media(min-width:481px){ul.pgwSlider>li,.pgwSlider>ul>li{width:100% !important}}@media(max-width:480px){.pgwSlider .ps-current{margin-bottom:6px;font-size:.9rem}.pgwSlider .ps-current img{width:100%;min-height:inherit}.pgwSlider .ps-current,ul.pgwSlider,.pgwSlider>ul{width:100%}ul.pgwSlider>li,.pgwSlider>ul>li{float:left;min-height:50px;max-height:70px;min-width:20%}ul.pgwSlider>li span,.pgwSlider>ul>li span{white-space:nowrap}}
<ul class="pgwSlider">
            
                <li><a href="Detail_24.html" target="_blank"><img src="/uploadfiles/202053132641365.jpg" /><span>链接文字1</span></a></li>
              
                <li><a href="Detail_16.html" target="_blank"><img src="/uploadfiles/202052204522244.jpg" /><span>链接文字2</span></a></li>
              
                <li><a href="Detail_13.html" target="_blank"><img src="/uploadfiles/202052202729739.png" /><span>链接文字3</span></a></li>
              
                <li><a href="Detail_11.html" target="_blank"><img src="/uploadfiles/20205220233888.jpg" /><span>链接文字4</span></a></li>
              </ul>
(function(a){a.fn.pgwSlider=function(i){var e={autoSlide:true,adaptiveHeight:false,adaptiveDuration:400,transitionDuration:400,intervalDuration:3000};if(this.length==0){return this}else{if(this.length>1){this.each(function(){a(this).pgwSlider(i)});return this}}var g=this;g.plugin=this;g.data=[];g.config={};g.currentSlide=0;g.slideCount=0;g.eventInterval=null;g.window=a(window);var h=function(){g.config=a.extend({},e,i);c();if(g.config.autoSlide){f()}return true};var b=function(l){var m={};var o=l.find("a").attr("href");if((typeof o!="undefined")&&(o!="")){m.link=o;var r=l.find("a").attr("target");if((typeof r!="undefined")&&(r!="")){m.linkTarget=r}}var k=l.find("img").attr("src");if((typeof k!="undefined")&&(k!="")){m.thumbnail=k}var s=l.find("img").attr("data-large-src");if((typeof s!="undefined")&&(s!="")){m.image=s}var p=l.find("span").text();if((typeof p!="undefined")&&(p!="")){m.title=p}else{var n=l.find("img").attr("alt");if((typeof n!="undefined")&&(n!="")){m.title=n}}var q=l.find("img").attr("data-description");if((typeof q!="undefined")&&(q!="")){m.description=q}return m};var d=function(k,l){var m=((k-((g.slideCount-1)*6))/g.slideCount);var n=(100/g.slideCount);g.plugin.find("ul li").css({width:n+"%"});if(typeof l!="undefined"&&l){g.plugin.find(".ps-current").animate({height:k},g.config.adaptiveDuration,function(){g.plugin.find("ul li").animate({height:m},g.config.adaptiveDuration)})}else{g.plugin.find(".ps-current").css("height",k);g.plugin.find("ul li").css("height",m)}return true};var c=function(){g.plugin.wrap('<div class="pgwSlider"></div>');g.plugin=g.plugin.parent();g.plugin.prepend('<div class="ps-current"></div>');g.slideCount=g.plugin.find("ul li").length;var k=1;g.plugin.find("ul li").each(function(){var l=b(a(this));l.id=k;g.data.push(l);a(this).addClass("elt_"+l.id);if(l.title){if(a(this).find("span").length==1){if(a(this).find("span").text()==""){a(this).find("span").text(l.title)}}else{a(this).find("img").after("<span>"+l.title+"</span>")}}a(this).css("cursor","pointer").click(function(m){m.preventDefault();j(l.id)});k++});if(g.config.autoSlide){g.plugin.on("mouseenter",function(){clearInterval(g.eventInterval);g.eventInterval=null}).on("mouseleave",function(){f()})}j(1);return true};var j=function(k,n){var m=g.data[k-1];var l=g.plugin.find(".ps-current");if(typeof m=="undefined"){throw new Error("PgwSlider - The element "+k+" is undefined");return false}g.currentSlide=k;if(typeof l.animate=="undefined"){l.animate=function(o,p,q){l.css(o);if(q){q()}}}l.animate({opacity:0},g.config.transitionDuration,function(){g.plugin.find("ul li").css("opacity","0.6");g.plugin.find("ul li.elt_"+k).css("opacity","1");if(m.image){l.html('<img src="'+m.image+'" alt="'+(m.title?m.title:"")+'">')}else{if(m.thumbnail){l.html('<img src="'+m.thumbnail+'" alt="'+(m.title?m.title:"")+'">')}else{l.html("")}}var o="";if(m.title){o+="<b>"+m.title+"</b>"}if(m.description){if(o!=""){o+="<br>"}o+=m.description}if(o!=""){l.append("<span>"+o+"</span>")}if(m.link){var p="";if(m.linkTarget){var p=' target="'+m.linkTarget+'"'}l.html('<a href="'+m.link+'"'+p+">"+l.html()+"</a>")}l.find("img").on("load",function(){if(typeof g.plugin.find(".ps-current").attr("data-checked")=="undefined"||g.plugin.find(".ps-current").attr("data-checked")==null){var q=g.plugin.find(".ps-current img").height();d(q);g.plugin.find(".ps-current").attr("data-checked","true");g.window.resize(function(){var r=g.plugin.find(".ps-current img").height();d(r)})}else{if(g.config.adaptiveHeight){var q=g.plugin.find(".ps-current img").height();d(q,true)}}});l.animate({opacity:1},g.config.transitionDuration)});if(typeof n!="undefined"&&g.config.autoSlide){f()}return true};var f=function(){clearInterval(g.eventInterval);if(g.slideCount>1&&g.config.autoSlide){g.eventInterval=setInterval(function(){if(g.currentSlide+1<=g.slideCount){var k=g.currentSlide+1}else{var k=1}j(k)},g.config.intervalDuration)}return true};g.startSlide=function(){g.config.autoSlide=true;f();return true};g.stopSlide=function(){g.config.autoSlide=false;clearInterval(g.eventInterval);return true};g.getCurrentSlide=function(){return g.currentSlide};g.getSlideCount=function(){return g.slideCount};g.displaySlide=function(k){j(k,true);return true};g.nextSlide=function(){if(g.currentSlide+1<=g.slideCount){var k=g.currentSlide+1}else{var k=1}j(k,true);return true};g.previousSlide=function(){if(g.currentSlide-1>=1){var k=g.currentSlide-1}else{var k=g.slideCount}j(k,true);return true};g.destroy=function(k){clearInterval(g.eventInterval);g.plugin.find("ul li").each(function(){a(this).unbind("click")});g.data=[];g.config={};g.currentSlide=0;g.slideCount=0;g.eventInterval=null;g.window=null;if(typeof k!="undefined"){g.plugin.find(".ps-current").unwrap().remove();g.hide()}else{g.parent().remove()}return true};g.reload=function(k){g.destroy(true);g=this;g.plugin=this;g.window=a(window);g.plugin.show();g.config=a.extend({},e,k);c();if(g.config.autoSlide){f()}return true};h();return this}})(window.Zepto||window.jQuery);

------网友观点--------------------
解决了

------网友观点--------------------
你可以研究会就省的发帖了
发布此文章仅为传递网友分享,不代表本站观点,若侵权请联系我们删除,本站将不对此承担任何责任。
软件开发 程序错误 异常 ybaby.netCopyright © 2020-2026  ybaby 版权所有  桂ICP备17004385号-2 网站地图