Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

闲话浏览器兼容

19,697 views

Published on

第18期W3Ctech深圳站分享

Published in: Technology, Business
  • 闲话浏览器兼容
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

闲话浏览器兼容

  1. 1. 闲话 浏览器 兼容<br />TID ghostzhang<br />2011-5-7<br />
  2. 2.
  3. 3. 主流的浏览器<br />: Quirks Mode<br />: IE7 Mode<br />
  4. 4. 浏览器兼容测试工具<br />在线测试资源<br />Browsershots(http://browsershots.org/)<br />Netrenderer(http://ipinfo.info/netrenderer/)<br />Browsrcamp(http://www.browsrcamp.com/)<br />Adobe Browserlab(https://browserlab.adobe.com/en-us/index.html)<br />Litmusapp(http://litmusapp.com/)<br />Anybrowsersiteviewer(http://www.anybrowser.com/siteviewer.html)<br />Fundisom(http://fundisom.com/g5/)<br />Delorielynxview(http://www.delorie.com/web/lynxview.html)<br />Browsera(http://www.browsera.com/)<br />
  5. 5. 浏览器兼容测试工具<br />插件和工具资源<br />IE Tab (https://addons.mozilla.org/en-US/firefox/addon/1419/)<br />IETester(http://www.my-debugbar.com/wiki/IETester/HomePage)<br />IECapt(http://iecapt.sourceforge.net/)<br />Multi-Safari(http://michelf.com/projects/multi-safari/)<br />Expression Web SuperPreview(http://expression.microsoft.com/en-us/dd565874.aspx)<br />Iphoney(http://www.marketcircle.com/iphoney/index.html)<br />MultipleIEs(http://multipleies.en.softonic.com/)<br />Multiple IE(http://multipleies.en.softonic.com/)<br />SortSite Professional(http://www.fileheap.com/software-sortsite-professional-download-26787.html)<br />Lunascape(http://www.lunascape.tv/)<br />
  6. 6. 大家的“心声”<br />
  7. 7. IE依然健在<br />数据来源: gs.statcounter.com<br />
  8. 8. IE6部分份额被IE8取代<br />数据来源: gs.statcounter.com<br />
  9. 9. 杯具的页面<br />Firefox<br />IE6<br />
  10. 10. WEB标准<br />
  11. 11. 效率(成本)、质量<br />代码量更少(更少带宽,更少¥)<br />显示更快(更好的用户体验)<br />更多浏览器支持(多终端支持)<br />更酷的效果(换肤)<br />……<br />
  12. 12. 于是<br />
  13. 13. HACK不可避免<br />页面显示效果受限于浏览器<br />于是……<br />.e{<br /> color:#FFF; /* FF,OP,IE8 */<br />[;color:#0F0;] /* Sa,CH*/<br />*color:#FF0; /* IE7 */<br />_color:#F00; /* IE6 */<br />}<br />
  14. 14. IE的各类BUG<br />关于IE的一般BUG达46个<br />由haslayout引起的5个。<br />数据来源:haslayout.net 采集时间:2011/5/3<br />
  15. 15. 常见BUG<br />盒模型(IE6对盒模型解析方式不同)<br />PNG Alpha透明<br />链接伪类CSS背景图重复加载<br />样式中文注释引起样式失效<br />父级padding后,子元素绝对定位BUG<br />由IE的haslayout引起的问题<br />3像素BUG<br />双倍边距<br />……<br />
  16. 16. HACK<br />为达到特定的效果,<br />而对代码所做的修改<br />
  17. 17. IE滤镜<br />.text-shadow {<br />text-shadow: 1px 1px 3px #777, 2px 2px 7px #999;<br />}<br />.ie-text-shadow {<br />-ms-filter: /* IE8+ */<br />"progid:DXImageTransform.Microsoft.MotionBlur(strength=1, direction=220) <br />progid:DXImageTransform.Microsoft.Blur(pixelradius=3) <br />dropshadow(color=#777777, offx=1, offy=1)";<br />filter: /* IE<8 */<br />progid:DXImageTransform.Microsoft.MotionBlur(strength=1, direction=220) <br />progid:DXImageTransform.Microsoft.Blur(pixelradius=3) <br />dropshadow(color=#777777, offx=1, offy=1);<br />}<br />
  18. 18. 私有属性也是HACK<br />.background-size { <br />background-image: url(bg.png);<br />-webkit-background-size: 50% 50%; /* Safari */<br />-khtml-background-size: 50% 50%; /* Konquer */<br />-moz-background-size: 50% 50%; /* Firefox */<br />-o-background-size: 50% 50%; /* Opera */<br />background-size: 50% 50%; /* CSS3 */<br />}<br />
  19. 19. 虽然HACK不可避免,但并不是不可减少的。<br />
  20. 20. 一些建议<br />宽度尽可能由布局结构控制<br />大部分情况下不是需要定高度的<br />定义宽度的时候要同时关注是否定义了内边距<br />大部分的BUG可由haslayout解决<br />
  21. 21. 遇到需要使用边距时<br />所有的margin统一一种方式,如所有的上边距由兄结点定义下边距的方式实现,可有效避免遇到边界重叠的问题。<br />内边距尽可能的由父级定义<br />
  22. 22. 常用CSS写法<br />/* 设置内联元素 */<br />.class{<br />display:inline-block;<br /> *display:inline;<br /> *zoom:1;<br />}<br />/* 容器有高度时<br />的清除浮动 */<br />.class{<br /> height:200px;<br />overflow:hidden;<br /> _overflow:visible;<br /> _height:1%;<br />}<br />
  23. 23. 你的做法呢?<br />
  24. 24. 差异化体验<br />IE<br />Chrome<br />
  25. 25. 结束了<br />吗?<br />
  26. 26. 一点点题外话<br />WEB标准 推荐的是 (X)HTML,更加 “严谨”、“规范”。而HTML5的出现,将原先好不容易建立的约束给解开了。<br />很多人找到了“懒”的借口。HTML5的确很时尚,大家都有追求时尚的心,但是否都有追求时尚的能力,这就需要好好思考了。<br />
  27. 27. Thx~<br />www.CSSForest.org<br />

×