13、前端tips汇总

[leoyaojy]

1. 让IE9以下的浏览器支持圆角及CSS3新特性：ie-css3.htc
2. 获取网页页面所有的图片：$x("//img")
3. !!将其他类型的值转换为boolean类型
4. 阻止冒泡:w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true
   阻止默认行为:w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false
js的return false只会阻止默认行为，jQuery则既阻止默认行为又防止对象冒泡
5. addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。IE只支持事件冒泡，不支持事件捕获
6. IE6不支持用overflow:hidden来清除浮动，使用_zoom:1解决，clear:both会导致margin失效，上下之间没有了间距
7. 需要注意的是为了IE6和IE7浏览器，要给clearfix类添加一条*zoom:1;触发haslayout
8. innerHeight和outerHeight是不支持IE9以下版本的，而screen系列则不存在兼容问题
9. 添加了position: absolute与float样式后，元素会隐式改变display属性为inline-block，可以设置宽高属性，不需要再显示设置display
10. 浏览器默认字体高都是16px
11. 以下是一些常见属性的兼容情况

inline-block: >=ie8
min-width/min-height: >=ie7
:before,:after: >=ie8
:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
border-radius: >= ie9
text-shadow,box-shadow: >= ie9
gradient: >= ie10

最后： IE6中png背景透明最好的方法，DDPngMin.js效果最好

<!--[if IE 6]>
<script src="js/DDPngMin.js"></script>
<script>DD_belatedPNG.fix('img');</script>
<![endif]-->