全国服务热线:4008-888-888

公司新闻

IE8及低版本号访问器不兼容CSS3 media queries的处理

IE8及低版本号访问器不兼容CSS3 media queries的处理方式 :21 来源于: 评价:0 点一下:

难题:IE8以及下列低版本号IE访问器在变小对话框时,UI沒有依照相对的规定显示信息对话框变小时相匹配的合理布局;别的访问器一切正常。

精准定位全过程:

实际上刚开始取得难题时是难以着手,不知道因此然,压根就没听闻也有media这一CSS特性,就更不知道道它的作用了。可是针对处理UI难题,有自身的一套构思,便是最先要思索为何会不正确及其为何沒有不正确2个层面,随后对于这2个层面的疑惑把html或js或css文档简单化再简单化,改动再改动,查询UI转变,进而变小难题范畴,最终找到难题根本原因。

这般我也想为何别的访问器页面合理布局沒有难题呢?因而持续的一部分删剪CSS文档编码,根据IE8之外的访问器查询网页页面合理布局,这般不断总算忽然见到IE8之外的访问器也出現上边的难题了,嘿嘿,做到目地了,根本原因就在这里里边,再精准精准定位该一部分, and (max-width: 900px) ...在起功效,什么啊,没见过,百度搜索吧,或是立即W3C,弄搞清楚它是做什么的就了解前边的为何了。

难题根本原因:

在新项目的CSS文档中选用了media这东西来依据视窗的尺寸全自动调节合理布局,可是,可是IE8及下列版本号访问器不兼容CSS3 media queries, and (max-width: 900px) 里边的css编码沒有实行,

@media screen and (max-width: 900px) {
  ...
}

这怎样是好呀,在网上倒是有很多人明确提出处理方式,非常简单的方式便是:

IE8和以前的访问器不兼容CSS3 media queries,你可以以在网页页面中加上css3-mediaqueries.js来处理这一难题。

 !--[if lt IE 9] 
 script src= svn/trunk/css3-mediaqueries.js /script 
 ![endif]-- 

原先这般,还挺简易嘛,結果大跌眼镜啊,新项目中如何试如何也不行呢,还望用过行得通的同事点拔点拔啊,没法只有选用另外一种略微繁杂些的方式,也是以在网上学来,这儿要考虑到2个难题,一是仅有IE8以及低版本号才做这里理,二是仅有访问器变小到某一个尺寸范畴后才做这里理。方式以下:

基本原理:选用jquery,实际上不明白,用到就可以了,随后在html中依据必须来更改相匹配的CSS文档

处理方式:

在因此网页页面的同用js文档后边加上以下编码:

/*Adjust the layout in IE8 and lower than IE8 when the browser is narrow*/
function processLowerIENavigate()
{
   var isIE = document.all ? 1 : 0;
   if (isIE == 1)
   {
       if(navigator.userAgent.indexOf( MSIE7.0 ) 0 || navigator.userAgent.indexOf( MSIE 8.0 ) 0)
       {  
    //  var doc=document; 
           var link=document.createElement( link
           link.setAttribute( rel , stylesheet
           link.setAttribute( type , text/css
           link.setAttribute( id , size-stylesheet
           link.setAttribute( href ,
 
           var heads = document.getElementsByTagName( head
           if(heads.length)
               heads[0].appendChild(link);
           else
               document.documentElement.appendChild(link);
           document.write( script type= text/javascript src= jquery.min.js /script
           document.write( script type= text/javascript src= media_screen.js /script
 
       }
   } 
}
var lowerIE8 = processLowerIENavigate();

media_screen.js文档內容以下,立即从在网上copy:
function adjustStyle(width) {
    width = parseInt(width);
    if (width 902) {
//alert( 900
//alert(width);
        $( #size-stylesheet ).attr( href , navigateLowerIE8.css
    } else {
      // alert( 900
  //alert(width);
       $( #size-stylesheet ).attr( href ,  
    }
}
$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});
navigateLowerIE8.css文档便是IE8其低版本号访问器在变小时的网页页面合理布局了。OK,一切都的确拿下。

 


phpcms 手机上
 大部分分人做站,期待电脑上版为http: www xi ... PHP CURL方
 cURL 是一个运用URL英语的语法要求来传送文档和数 ... apache,nginx
 对于为何设定提交文件目录没有权利限这一我也不累 ... 运用phpstudy
 常常建立网站的朋友,通常要在自己的电脑上同时 ... phpsso 通讯
 phpsso 中的通讯密匙与同样,却通信不成功, ...


在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服