浏览器兼容

作者: IF_123 | 来源:发表于2019-03-11 22:18 被阅读45次

    Css兼容问题

    • 样式在各浏览器中解析不一致的情况,或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.
    • CSS Hack: CSS中,Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法,修补bug的方法
    • Filter:表示过滤器的意思,它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲,Filter是hack方法中的一种;
    IE6常见CSS解析Bug及hack(解决方法)

    1.默认高度(IE6)

    描述:在IE6及以下版本中,部分块元素拥有默认高度(低于18px高度)
    hack1:给元素添加声明:font-size:0;
    hack2:给元素添加声明:overflow:hidden;
    

    2.图片间隙
    div中的图片间隙

    bug:在块元素中插入图块状元素片时,有时图片会将块元素下方撑大三像素。
    Hack:将<img>转为,给<img>添加声明:display:block;
    

    3.双倍浮向(双倍边距)
    描述:当Ie6及更低版本浏览器在解析浮动元素时,会错误地把浮向边的边界加倍显示。

    hack:给浮动元素添加声明:display:inline;
    

    4.表单元素行高不一致(IE,MOZ,C,O,S)

    bug:表单元素行高对齐方式不一致
    hack:给表单元素添加声明:float:left;
    

    5.按钮元素默认大小及样式不一 致

    hack1: 统一大小及样式/(用a标记模拟)
    hack2:如果这个按钮是一个图片,直接把图片作为按钮的背景图即可。
    

    6.百分比bug
    描述:在IE6及以下版本中在解析百分比时,会按四舍五入方式计算从而导致50%加50%大于100%的情况。

    hack:给右面的浮动元素添加声明:clear:right;     意思:清除右浮动。     
    clear:left:清除左浮动
    clear:both:清除两边的浮动
    

    7.鼠标指针bug
    描述:cursor属性的hand属性值只有IE8浏览器识别;

    hack:如统一某元素鼠标指针形状为手型,应添加声明:cursor:pointer;
    - auto默认
    - crosshair加号
    - text文本
    - wait等待
    - help帮助
    - progress过程
    - inherit继承
    - move移动
    - ne-resize向上或向右移动
    - pointer手形
    

    8.透明属性

    IE浏览器写法:filter:alpha(opacity=数值);取值范围 1-100(IE8以下)
    兼容其他浏览器写法:opacity:数值;(数值的取值范围0-1,0.1,0.2,0.3-----0.9)
    

    9.当li里的A加display:block或float:left时,出现行高不一致,有的会多出3像素

    hack1:给a加display:inline-block;
    hack2:给a加display:inline;
    Hack3:给li加float,并加宽度;
    

    10.当li加float属性,并且li里的A转换成块元素,并给a加了高度时,IE6里会出现每个LI单独占一行或阶梯状的情况

    hack1:不给a标签加高度;
    Hack2:给a标签也添加float;
    

    11.父元素里有块元素,如果给子元素添加添加margin-top,父元素会下来

    Hack1:给父元素添加overflow:hidden;
    Hack2:给子元素添加float;
    Hack3:给父元素加边框;
    

    或者用其他的方法达到我们想要的效果:如给父元素加padding-top.
    12.Fliter(过滤器)方法兼容浏览器

    - _下划线:IE6浏览器的兼容符号; (只有IE6浏览器识别此符号,其他浏览器不识别)
            语法:选择器{_属性:属性值;}
    
    - *或+:兼容所有IE7以下浏览器;(只有IE7及以下版本浏览器识别此符号,其他浏览器不识别)
            语法:选择器{*属性:属性值; +属性:属性值; }
    
    - \0:IE8及以上浏览器的兼容符号;
            语法:选择器{属性:属性值\0;}
    
    - \9:兼容所有IE浏览器;
            语法:选择器{属性:属性值\9}(只有IE浏览器识别此符号,其他浏览器不识别)
    

    js兼容问题

    1.各浏览器下 scrollTop的差异
    IE6/7/8:
    对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ;
    对于有doctype声明的页面则可以使用 document.documentElement.scrollTop;
    Safari:
    safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset ;
    Firefox:
    火狐等等相对标准些的浏览器就省心多了,直接用 document.documentElement.scrollTop ;
    *完美的获取scrollTop 赋值短语 :

    var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;*
    

    2.关于使用 firstChild,lastChild 等,获取第一个/最后一个元素节点时产生的问题
    --IE6-8下: firstChild,lastChild,nextSibling,previousSibling,获取第一个元素节点
    --高版本浏览器下: firstElementChild,lastElementChild,nextElementSibling,previousElementSibling

    var firstChild = oBox.firstChild || oBox.firstElementChild;
    

    3.**获取样式 currentStyle 和 getComputedStyle **
    IE: currentStyle
    Chrome: getComputedStyle

    function getStyle(obj,attr){
        if(window.getComputedStyle){
            return getComputedStyle(obj,null)[attr];
        }
        return obj.currentStyle[attr];
    }
    

    4.事件对象
    ie低版本:window.event

    var evt = e || window.event;
    

    5.获取事件源
    ie : event.srcElement
    firefox : event.target

    var _target = evt.target || evt.srcElement;
    

    6.添加事件监听器attachEvent/attachEventLister
    IE8以下用: attachEvent
    Chrome,IE9-10用: attachEventLister

               //添加事件
               function addEvent(obj,type,fn){
                   if(obj.addEventListener){
                       obj.addEventListener(type,fn,false);
                   }else{
                       obj.attachEvent("on"+type,fn);
                   }
               }
               //移除事件
               function removeClass(obj,type,fn){
                   if(obj.removeEventListener){
                       obj.removeEventListener(type,fn)
                   }else{
                       obj.detachEvent("on"+type,fn);
                   }
               }
    

    7.document.getElementByClassName():根据类名查找元素,返回集合(IE9及以上版本支持)

    function getByClassName(className, context) {
             context = context || document;
             if (document.getElementsByClassName) // 浏览器支持使用 getElementsByClassName
                    return context.getElementsByClassName(className);
             /* 不支持使用 getElementsByClassName */
             // 保存查找到的元素的数组
             var result = [];
             // 查找 context 后代的所有元素
             var allTags = context.getElementsByTagName("*");
             // 遍历所有的元素
             for(var i = 0, len = allTags.length; i < len; i++) {
                  // 获取当前遍历元素使用的所有 class 类名
                  var classNames = allTags[i].className.split(" ");
                  // 遍历当前元素的所有类名,和待查找的类名比较
                  for (var j = 0, l = classNames.length; j < l; j++) {
                         if (classNames[j] == className) { // 当前所在遍历的元素是要查找出来的其中一个
                                result.push(allTags[i]);
                                break;
                         }
                  }
           }
           // 返回查找结果
           return result;
    }
    

    8.阻止事件冒泡
    stopPropagation()和cancelBubble,前者是方法,是标准的写法,后者是属性,赋值true表示阻止,是IE的写法。

    if(evt.stopPropagation){
        evt.stopPropagation();
    }else{
        evt.cancelBubble = true;
    }
    

    9.阻止默认行为兼容
    ie : returnValue
    其他浏览器:preventDefault

    event.preventDefault?event.preventDefault():event.returnValue=false;
    或者直接在事件处理程序中return false;
    
    

    10.获取用户按下的键值

    console.log(evt.keyCode || evt.which);
    

    相关文章

      网友评论

        本文标题:浏览器兼容

        本文链接:https://www.haomeiwen.com/subject/ymjipqtx.html