Your SlideShare is downloading. ×
0
闲话 浏览器 兼容<br />TID ghostzhang<br />2011-5-7<br />
主流的浏览器<br />: Quirks Mode<br />: IE7 Mode<br />
浏览器兼容测试工具<br />在线测试资源<br />Browsershots(http://browsershots.org/)<br />Netrenderer(http://ipinfo.info/netrenderer/)<br />B...
浏览器兼容测试工具<br />插件和工具资源<br />IE Tab (https://addons.mozilla.org/en-US/firefox/addon/1419/)<br />IETester(http://www.my-debu...
大家的“心声”<br />
IE依然健在<br />数据来源: gs.statcounter.com<br />
IE6部分份额被IE8取代<br />数据来源: gs.statcounter.com<br />
杯具的页面<br />Firefox<br />IE6<br />
WEB标准<br />
效率(成本)、质量<br />代码量更少(更少带宽,更少¥)<br />显示更快(更好的用户体验)<br />更多浏览器支持(多终端支持)<br />更酷的效果(换肤)<br />……<br />
于是<br />
HACK不可避免<br />页面显示效果受限于浏览器<br />于是……<br />.e{<br />    color:#FFF;	/* FF,OP,IE8 */<br />[;color:#0F0;]	/* Sa,CH*/<br />*co...
IE的各类BUG<br />关于IE的一般BUG达46个<br />由haslayout引起的5个。<br />数据来源:haslayout.net	采集时间:2011/5/3<br />
常见BUG<br />盒模型(IE6对盒模型解析方式不同)<br />PNG Alpha透明<br />链接伪类CSS背景图重复加载<br />样式中文注释引起样式失效<br />父级padding后,子元素绝对定位BUG<br />由IE的h...
HACK<br />为达到特定的效果,<br />而对代码所做的修改<br />
IE滤镜<br />.text-shadow {<br />text-shadow: 1px 1px 3px #777, 2px 2px 7px #999;<br />}<br />.ie-text-shadow {<br />-ms-filt...
私有属性也是HACK<br />.background-size { <br />background-image: url(bg.png);<br />-webkit-background-size: 50% 50%; 		/* Safari...
虽然HACK不可避免,但并不是不可减少的。<br />
一些建议<br />宽度尽可能由布局结构控制<br />大部分情况下不是需要定高度的<br />定义宽度的时候要同时关注是否定义了内边距<br />大部分的BUG可由haslayout解决<br />
遇到需要使用边距时<br />所有的margin统一一种方式,如所有的上边距由兄结点定义下边距的方式实现,可有效避免遇到边界重叠的问题。<br />内边距尽可能的由父级定义<br />
常用CSS写法<br />/* 设置内联元素 */<br />.class{<br />display:inline-block;<br />    *display:inline;<br />    *zoom:1;<br />}<br />...
你的做法呢?<br />
差异化体验<br />IE<br />Chrome<br />
结束了<br />吗?<br />
一点点题外话<br />WEB标准 推荐的是 (X)HTML,更加 “严谨”、“规范”。而HTML5的出现,将原先好不容易建立的约束给解开了。<br />很多人找到了“懒”的借口。HTML5的确很时尚,大家都有追求时尚的心,但是否都有追求时尚的...
Thx~<br />www.CSSForest.org<br />
Upcoming SlideShare
Loading in...5
×

闲话浏览器兼容

18,490

Published on

第18期W3Ctech深圳站分享

Published in: Technology, Business
1 Comment
15 Likes
Statistics
Notes
  • 闲话浏览器兼容
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
18,490
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
167
Comments
1
Likes
15
Embeds 0
No embeds

No notes for slide

Transcript of "闲话浏览器兼容"

  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 />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×