CSS常见BUG/清除浮动/跨浏览器兼容/函数作用域/闭包-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_37851778/article/details/76738054

1.CSS常见bug
①双外边距浮动
这里写图片描述

<!doctype html>
<html>
<head>
    <title></title>
    <meta charset='utf-8'>
    <link rel="stylesheet" type="text/css" href="">
    <style type="text/css">
    body{
        border: 1px solid orange;
        height: 60px;
    }
        div#box{
            margin-left: 10px;
            background-color: #fab;
            float: left;
            display: inline;
        }
        p{
            margin:20px;
            background-color: teal;
        }
    </style>
</head>
<body>
   <div id='box'>
       <p>This is paragraph has 20px margin</p>
   </div>
</body>
</html>

②ie5,6的3像素文本偏移bug

p{
    height:1%;
    margin-left:0;
}
.myFloat{
    margin-right:-3px;
}

//如果浮动元素时图像
//ie 5.x
p{
    height:1%;
    margin-left:0;
}
img.myFloat{
    margin:0 -3px;
}
//ie 6.x
p{
    height:1%;
    margin-left:0;
}
img.myFloat{
    margin:0;
}

③ie6重复字符
Description：一系列浮动元素的最后一个元素中最后几个字符会在浮动元素下方重复。
Why：在这一系列浮动元素中，首尾元素之间存在多个注释，y=2*(i-2),i>=2
Solution：从HTML中压缩或删除注释。

④ie6“藏猫猫”bug
Description：某种情况下，文本”消失”了。
Why：内容出现在浮动元素的旁边，而最后跟了一个清除的元素，实际上是隐藏于父元素的背景颜色或图像之下，只有当刷新页面时才会重新出现。
Solution：①去掉父元素的背景或图像。②为防止清理元素与浮动元素接触，将容器里的元素应用特定的尺寸。③为容器设定行高。④浮动和容器元素的position设置为relative。

⑤相对容器中的绝对定位。
Description：绝对定位会按照视口进行定位，而非相对容器。
Solution：为相对容器增加height:1%;

【参考：http://www.iyunlu.com/view/css-xhtml/55.html】
2.清除浮动(clear)还是闭合浮动(enclosing)？

from:http://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html

3.清除浮动的最佳方案：通过CSS加入一个能使用clear:both的媒介。—:after伪元素
好文章：【BFC神奇背后的原理】from：http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
**【那些年我们一起清除过的浮动】from:http://www.iyunlu.com/view/css-xhtml/55.html

div.parent:after{
            content:'.';//加入一个点
            height: 0;//避免生成内容破坏原有布局的高度，如图
            visibility: hidden;//隐藏掉该点
            display: block;//使生成的元素（点）以块级元素显示，占满剩余空间。
            clear:both;//
        }

4.跨浏览器兼容
①

function getInnerText(element){
    return (typeof element.textContent == 'string' ?
            element.textContent : element.innerText);
}
function setInnerText(element,text){
    if(typeof element.textContent == 'string'){
        element.textContent = text;
    }else{
        element.innerText = text;
    }
}

②

function contains(refNode,otherNode){
    if(typeof refNode.contains == 'function' &&    //ie
        (!client.engine.webkit || client.engine.webkit >= 522)){
        return refNode.contains('otherNode');
    }else if(typeof.compareDocumentPosition(otherNode) == 'function'){  //DOM Level 3
        return !!(refNode.compareDocumentPosition(otherNode) & 16);
    }else{
        var node = otherNode.parentNode;
        do{
            if(node===refNode){
                return true;
            }else{
                node = node.parentNode;
            }
        }while(node != null)
        return false;
    }
}

③

function matchesSelector(element,selector){
    if(element.matchesSelector){
        return element.matchesSelector(selector);
    }else if(element.msMatchesSelector){            //ie 9+
        return element.msMatchesSelector(selector);
    }else if(element.mozMacthesSelector){           //Firefox 3.6+
        return element.mozMacthesSelector(selector);
    }else if(element.webkitMacthesSelector){        //Safari 5+ Chrome
        return element.webkitMacthesSelector(selector);
    }else{
        throw new Error('Not supported.');
    }
}
if(matchesSelector(document.body,'body.page1')){
    //do something
}

④

var EventUtil={
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);//冒泡阶段---DOM Level 2
        }else if(element.attachEvent){
            element.attachEvent('on'+type,handler);
        }else{
            element['on'+type] = handler;
        }
    },
    removeHandler:function(element,type,hander){
        if(element.removeEventListener){
            element.removeEventListener(type,hander,false);
        }else if(detachEvent){
            element.detachEvent('on'+type,handler);
        }else{
            element['on'+type] = null;
        }
    },
    getEvent:function(event){
        return event ? event :window.event; //DOM Levl 0中event对象作为window的一个属性
    },
    getTarget:function(event){
        return event.target || event.srcElement;//DOM  ie
    },
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault(); //DOM
        }else{
            event.returnValue = false; //ie
        }
    },
    stopPropagation:function(event){
        if(event.stopPropagation){
            event.stopPropagation(); //DOM
        }else{
            event.cancelBubble == true;
        }
    }
};

5.函数作用域
①定义在函数中的参数和变量在函数外部是不可见的，但在一个函数任意位置定义的变量，在该函数内部任何地方都可见。
②

var foo = function(){
    var a = 3,b = 5;
    var bar = function(){
        var b=7,c=11;
        //此时  a=3,b=7,c=11
        a += b+c;
        //此时  a=21,b=7,c=11
    };
    //此时 a=3,b=5,c未定义
    bar();
    //此时 a=21,b=5,c未定义
};

③作用域的好处：内部函数可以访问定义它们的外部函数的参数和变量（除this&arguments）。

6.闭包

var fade = function(node){
        var level =1;
        var step = function(){
            var hex = level.toString(16);
            node.style.backgroundColor = '#ffff' + hex +hex;
            if(level < 15){
                level += 1;
                setTimeout(step,1000);
            }
        };
        setTimeout(step,3000);//three two one  yellow ------- white
    }
    fade(document.body);

var add_the_handlers = function(nodes){
    var helper = function(i){   //辅助函数
        return function(e){
            alert(i);
        }
    }
    var i;
    for(i=0;i<nodes.length;i++){   //避免在循环中创建函数
        nodes[i].onclick = helper(i);
    }
};