第18期W3Ctech深圳站分享

1. 闲话 浏览器 兼容 TID ghostzhang 2011-5-7

3. 主流的浏览器 : Quirks Mode : IE7 Mode

4. 浏览器兼容测试工具 在线测试资源 Browsershots（http://browsershots.org/） Netrenderer（http://ipinfo.info/netrenderer/） Browsrcamp（http://www.browsrcamp.com/） Adobe Browserlab（https://browserlab.adobe.com/en-us/index.html） Litmusapp（http://litmusapp.com/） Anybrowsersiteviewer（http://www.anybrowser.com/siteviewer.html） Fundisom（http://fundisom.com/g5/） Delorielynxview（http://www.delorie.com/web/lynxview.html） Browsera（http://www.browsera.com/）

5. 浏览器兼容测试工具 插件和工具资源 IE Tab （https://addons.mozilla.org/en-US/firefox/addon/1419/） IETester（http://www.my-debugbar.com/wiki/IETester/HomePage） IECapt（http://iecapt.sourceforge.net/） Multi-Safari（http://michelf.com/projects/multi-safari/） Expression Web SuperPreview（http://expression.microsoft.com/en-us/dd565874.aspx） Iphoney（http://www.marketcircle.com/iphoney/index.html） MultipleIEs（http://multipleies.en.softonic.com/） Multiple IE（http://multipleies.en.softonic.com/） SortSite Professional（http://www.fileheap.com/software-sortsite-professional-download-26787.html） Lunascape（http://www.lunascape.tv/）

6. 大家的“心声”

7. IE依然健在 数据来源： gs.statcounter.com

8. IE6部分份额被IE8取代 数据来源： gs.statcounter.com

9. 杯具的页面 Firefox IE6

10. WEB标准

11. 效率（成本）、质量 代码量更少（更少带宽，更少￥） 显示更快（更好的用户体验） 更多浏览器支持（多终端支持） 更酷的效果（换肤） ……

12. 于是

13. HACK不可避免 页面显示效果受限于浏览器 于是…… .e{ color:#FFF; /* FF,OP,IE8 */ [;color:#0F0;] /* Sa,CH*/ *color:#FF0; /* IE7 */ _color:#F00; /* IE6 */ }

14. IE的各类BUG 关于IE的一般BUG达46个 由haslayout引起的5个。 数据来源：haslayout.net 采集时间：2011/5/3

15. 常见BUG 盒模型（IE6对盒模型解析方式不同） PNG Alpha透明 链接伪类CSS背景图重复加载 样式中文注释引起样式失效 父级padding后，子元素绝对定位BUG 由IE的haslayout引起的问题 3像素BUG 双倍边距 ……

16. HACK 为达到特定的效果， 而对代码所做的修改

17. IE滤镜 .text-shadow { text-shadow: 1px 1px 3px #777, 2px 2px 7px #999; } .ie-text-shadow { -ms-filter: /* IE8+ */ "progid:DXImageTransform.Microsoft.MotionBlur(strength=1, direction=220) progid:DXImageTransform.Microsoft.Blur(pixelradius=3) dropshadow(color=#777777, offx=1, offy=1)"; filter: /* IE<8 */ progid:DXImageTransform.Microsoft.MotionBlur(strength=1, direction=220) progid:DXImageTransform.Microsoft.Blur(pixelradius=3) dropshadow(color=#777777, offx=1, offy=1); }

18. 私有属性也是HACK .background-size { background-image: url(bg.png); -webkit-background-size: 50% 50%; /* Safari */ -khtml-background-size: 50% 50%; /* Konquer */ -moz-background-size: 50% 50%; /* Firefox */ -o-background-size: 50% 50%; /* Opera */ background-size: 50% 50%; /* CSS3 */ }

19. 虽然HACK不可避免，但并不是不可减少的。

20. 一些建议 宽度尽可能由布局结构控制 大部分情况下不是需要定高度的 定义宽度的时候要同时关注是否定义了内边距 大部分的BUG可由haslayout解决

21. 遇到需要使用边距时 所有的margin统一一种方式，如所有的上边距由兄结点定义下边距的方式实现，可有效避免遇到边界重叠的问题。 内边距尽可能的由父级定义

22. 常用CSS写法 /* 设置内联元素 */ .class{ display:inline-block; *display:inline; *zoom:1; } /* 容器有高度时 的清除浮动 */ .class{ height:200px; overflow:hidden; _overflow:visible; _height:1%; }

23. 你的做法呢？

24. 差异化体验 IE Chrome

25. 结束了 吗？

26. 一点点题外话 WEB标准 推荐的是 (X)HTML，更加 “严谨”、“规范”。而HTML5的出现，将原先好不容易建立的约束给解开了。 很多人找到了“懒”的借口。HTML5的确很时尚，大家都有追求时尚的心，但是否都有追求时尚的能力，这就需要好好思考了。

27. Thx~ www.CSSForest.org