小小结( 二 )

1. for循环中执行setTimeout问题

代码片段：

for(var i=0;i<8;i++){
    setTimeout(function () {
         console.log(i)
     },0)
 }

执行结果：输出了8次8，这跟js的执行顺序和作用域链有关。

1.1 js同步执行与异步执行 js的执行机制：js是单线程环境，从上到下、依次执行，即 同步执行；在这段代码中，for循环是同步代码，setTimeout是异步代码。 js在执行代码的过程中，碰到同步代码会依次执行，碰到异步代码就会将其放入任务队列中进行等待，当同步代码执行完毕后再开始执行异步代码，即 异步执行。

1.2 js作用域问题 当同步代码执行完毕后，开始执行异步的setTimeout代码，执行setTimeout时需要从当前作用域内寻找一个变量 i ，此时for循环已执行完毕，当前 i=8，所以执行setTimeout时输出为8，任务队列中的剩余7个setTimeout也依次执行，输出为8。

1.3 常用解决方法 利用立即执行函数，当for循环执行时，就会立即执行setTimeout，从而使得到的每个副本i值都不一样，这样就可以得到想要的for循环的结果。如：

for(var i=0;i<8;i++){
    (function (x) {
        setTimeout(function () {
            console.log(x)
        },0)
    })(i);
}

执行结果：输出1 2 3 4 5 6 7.

2. layui 弹框渲染下拉框被遮住，影响用户体验。

在用layui做后台管理系统的时候想要实现这样一个功能，点击弹出一个窗口，窗口是下拉选择框，给用户选择。但是却发现，弹窗虽然固定了高宽，但是里面的下拉框，在显示的时候却被弹窗挡住了，如下图：

F12查看代码，发现在layui内部样式中，对.layui-layer-content定义了overflow属性且为auto,只要取消这个属性，就不存在遮挡问题。

关于overflow有如下几个值 :

相信大家看了都知道该怎么改了，只需要重新定义样式为如下就好了：

.layui-layer-admin .layui-layer-content{
    overflow: visible;
}

修改后如下图：

是不是很简单啊！

3. 一些常见的关于浏览器兼容的问题

① 不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同

解决方案：css 里增加通配符 * { margin: 0; padding: 0; }

在IE7和FF中width宽度不包括padding，在Ie6中包括padding.

② IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题

解决方案：设置 display:inline;

③ 当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度

解决方案：超出高度的标签设置 overflow:hidden,或者设置line-height的值小于你的设置高度

④ 图片默认有间距

解决方案：使用float 为img 布局

⑤ IE9下浏览器不能使用opacity

解决方案：

opacity:0.5;
filter:alpha(opacity=50);
filter:progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

⑥ 边距重叠问题: 当相邻两个元素都设置了margin 边距时,margin 将取最大值, 舍弃最小值；

解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；

⑦ 两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；

解决方案：父级元素设置 position:relative;

⑧ const问题；Firefox下,可以使用const关键字或var关键字来定义常量; IE下,只能使用var关键字来定义常量.

解决方法：统一使用var关键字来定义常量.

⑨ event.x与event.y问题；IE下,event对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

解决方法：使用 mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.

⑩ 事件委托方法；IE下，使用document.body.onload = inject; 其中function inject()在这之前已被实现；在Firefox下，使用document.body.onload = inject();

解决方法：统一使用document.body.onload=new Function(’inject()’); 或者document.body.onload = function(){} [注意] Function和function的区别。

⑪ innerText在IE中能正常工作，但在FireFox中却不行.

解决方法: 需用textContent。

if(navigator.appName.indexOf("Explorer")   >   -1){
        document.getElementById('element').innerText   =   "my   text";
}   else{
        document.getElementById('element').textContent   =   "my   text";
}

⑫ IE捉迷藏的问题;当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

⑬ float的div闭合;清除浮动;自适应高度

• 例如：＜div id=”floatA”>＜div id=”floatB”>＜div id=”NOTfloatC”>

这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)

这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在＜div class=”floatB”>＜div class=”NOTfloatC”>之间加上＜div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可：.clear{clear:both;}

• 作为外部 wrapper 的 div 不要定死高度,为了让高度能自适应，要在wrapper里面加上overflow:hidden; 当包含float的box的时候，高度自适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。

例如某一个wrapper如下定义： .colwrapper{overflow:hidden; zoom:1; margin:5px auto;}

• 对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:

<div id=”page”>
<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>
</div>

比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决：

<div id=”page”>
<div id=”bg” style=”float:left;width:100%”>
<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>
</div>
</div>

再嵌入一个float left而宽度是100%的DIV解决之。

或者另一种方法：用选择器（：after）在page之后插入一个空标签,并清除浮动

.page:after { content: ""; display: table; clear: both; }

• 万能float 闭合(非常重要!)

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上class="clearfix" 即可,屡试不爽。

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

.clearfix { display:inline-block; }

.clearfix {display:block;}

或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}

4.实用小技巧之 Webstorm/Phpstorm 误删文件如何快速找回。

程序员写代码最怕的大概就是自己眼花误删了正确的文件，顿时心里骂了自己一万遍，就像我

，不过呢还好Webstorm可以恢复历史文件。方法有二，如下：

方法1：

① 在所恢复文件夹右击， Local History => Show History

② 选择需要恢复的版本右击，点击 Revert 恢复。

③ 如果整个工程都删除了， 在桌面创建一个同名的文件夹，通过webstorm打卡这个项目，在执行1，2步骤。

方法2：

① 菜单栏点击 View => Recent Changes

② 这里记录了最近的文件操作状况，找一下自己几分钟删除的Deleting文件。

③ 点开后可以查看是否是刚才误删的文件，如果是的话，右下角可以Revert恢复。

用了以上方法就可以看到误删的文件已经回来啦！这里就不一一截图了，方法很简单，但是还是希望大家不要遇到这种情况哦。