Web前端开发细微常识

一.如何触发IE6/7的hasLayout

经常看到一些流行的hack中有height: 1%;或者zoom: 1;这样的东西，不加还不行，其实这是用来触发IE6/7的hasLayout属性的：

height: 1%;IE6下会解析为min-height，但不适用于IE7，zoom: 1;可以触发IE7的hasLayout

在浏览器兼容的hack中用得很多，比如用来解决盒子坍塌问题的.clearfix就用了height: 1%;

P.S.关于盒子坍塌问题的更多信息请查看黯羽轻扬：CSS盒子坍塌问题的4种解决方案

二.针对IE的CSS Hack

IE条件注释

缺点：需要同时维护多个文件中的同一样式，可维护性差
选择符前缀法

*html前缀只对IE6有效，*+html前缀只对IE7有效，例如：
```
.test {
    /* IE6/7/8... */
}

*html .test{
    /* IE6 */
}

*+html .test{
    /* IE7 */
}
```
缺点：向后兼容存在风险，IE8/9/10也可能识别*html和*+html前缀，而且不能用于内联样式
样式属性前缀法

_只对IE6有效，*对IE6/7都有效，例如：
```
.test {
    color: red;   /* IE6/7/8... */
    *color: red;  /* IE6/7 */
    _color: red;  /* IE6 */
}
```
缺点：向后兼容也存在风险，但可以用于内联样式

推荐做法是使用IE支持的条件注释，但实际应用中应该根据项目规模等因素采用合适的方式

三.margin的特例

相邻的margin-top和margin-bottom会重合，而margin-left和margin-right却不会，所以不要混合使用，项目初期就应该约定好只用哪一个

四.样式覆盖规则的特例

样式有特殊性，或者说是权重，特殊性相同的样式规则后声明的会覆盖掉先声明的

注意是声明顺序，而不是元素class属性值字符串中的先后顺序，例如：

.myStyle1 {
    color: red;
}
.myStyle2 {
    color: green;
}

<p class="myStyle1 myStyle2">绿色的</p>
<p class="myStyle2 myStyle1">也是绿色的</p>

class属性值字符串中样式名的先后次序对样式覆盖规则没有影响

P.S.至于特殊性是什么，具体计算规则是什么，请查看黯羽轻扬：

五.DOM操作的优化技巧

最基本的技巧是缓存DOM节点对象，避免频繁DOM查找的开销，此外还有优化DOM查找的小技巧：

先用byId缩小查找范围，再用byTagName获取元素，例如：

var p = document.getElementById("p");
// alert(p.getElementById("innerP").innerHTML); // Uncaught TypeError: Object #<HTMLDivElement> has no method 'getElementById' 
alert(p.getElementsByTagName("p")[0].innerHTML);

注意上面代码注释部分，任意元素都有getElementsByTagName方法，但只有document元素有getElementById方法

P.S.关于DOM优化的更多技巧，请查看黯羽轻扬：JS学习笔记12_优化

六.IE6的PNG透明

IE6下PNG图片的透明部分显示为粉红色（淡蓝色？），可以用IE滤镜修复：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="图片路径", sizingMethod="crop");

例如：

.img{
    background: url(icon.png);
    width: 32px;
    height: 32px;
}
/* IE6 hack */
*html .img {
    background: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="icon.png", sizingMethod="crop");
}

使用这个滤镜后在IE6下透明像素就显示正常了，关于IE6和PNG透明的更多解决方案请查看张鑫旭：IE6下png背景不透明问题的综合拓展

七.JS对象字面量中多余的逗号

js对象字面量中最后一个属性末尾的逗号会引起IE6/7错误，IE8可能报错，其它高级浏览器不会报错，所以为了更好的兼容性，对象字面量中不要有多余逗号

八.页面跳转（重定向）与刷新（重新载入）

跳转和刷新的本质是一样的（刷新算是跳转到当前页面），姑且统称为跳转，一般实现方式是location.href = strUrl;，还有其它实现方式，这里不深究，我们关注的是重定向之后发生了什么？

重定向语句执行后页面立即跳转吗？不是。页面要等待所有js脚本执行完毕后才跳转，不信可以测试一下，提供一个巧妙的测试方法：

location.href = 'http://ayqy.net/';
while(true);

按下F12打开控制台，执行上面的代码，然后发现页面卡死或者浏览器崩溃就足够说明问题了

注意，其它任何形式的跳转都一样要等待脚本执行完毕才会跳转，包括location.reload(false/true);包括模拟触发a标签跳转事件

九.NaN与位运算

NaN（Not a Number）并非与任何数做任何运算结果都是NaN，做数值运算是这样没错，但位运算会把NaN当作二进制0处理，所以NaN | 1 === 1 && NaN | 0 === 0

十.待续2015-6-11

参考资料

《编写高质量代码Web前端开发修炼之道》

黯羽轻扬