浏览器兼容性问题简介 --- 黄昊

13,643 views

Published on

webrebuild.org北京第一届交流会-悟道WEB标准,浏览器兼容性问题简介 --- 黄昊

Published in: Education, Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
13,643
On SlideShare
0
From Embeds
0
Number of Embeds
186
Actions
Shares
0
Downloads
141
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide
  • From why to how
  • 浏览器兼容性问题简介 --- 黄昊

    1. 1. 浏览器兼容性问题简介
    2. 2. 你遇到过这些问题吗 Firefox IE6
    3. 3. 内容 <ul><li>浏览器兼容性问题分类 </li></ul><ul><li>浏览器的“模式” </li></ul><ul><li>如何编写具有良好兼容性的网页 </li></ul>
    4. 4. 浏览器兼容性问题分类 <ul><li>显示问题: CSS 兼容性 </li></ul><ul><ul><li>height/width, position:fixed, … </li></ul></ul><ul><li>脚本问题: Java Script 兼容性 </li></ul><ul><ul><li>DOM, Date.getYear, scrollTop, … </li></ul></ul><ul><li>缺陷( bug )与特性( feature ) </li></ul><ul><ul><li>IE: 盒模型, float , text-align </li></ul></ul><ul><ul><li>IE: filter , behavior , execCommand </li></ul></ul>
    5. 5. 有多少种浏览器? : Quirks Mode : IE7 Mode ……
    6. 6. 浏览器的“模式” <ul><li>标准模式 (Standards mode) </li></ul><ul><li>怪异模式 (Quirks mode) ,又称怪癖模式或兼容模式 </li></ul><ul><li>浏览器根据页面指定的 DOCTYPE 来选择使用何种模式渲染页面 </li></ul><ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul></ul><ul><ul><li><!DOCTYPE html> </li></ul></ul><ul><li>页面实际采用的渲染模式可使用脚本来检测: </li></ul><ul><ul><li>document.compatMode: &quot;BackCompat&quot; &quot;CSS1Compat&quot; </li></ul></ul>
    7. 7. 浏览器的模式会影响到: <ul><li>CSS 的页面布局 </li></ul><ul><ul><li>例如: IE box model </li></ul></ul><ul><li>CSS 的解析 </li></ul><ul><ul><li>例如: !important 是否支持 </li></ul></ul><ul><li>脚本的行为 </li></ul><ul><ul><li>例如: document.body.scrollTop / document.documentElement.scrollTop </li></ul></ul><ul><ul><li>Firefox 在 Quirks Mode 下支持 id 引用 </li></ul></ul>
    8. 8. 怎样使用 DOCTYPE 来指定 页面在浏览器中的渲染模式 <ul><li>最常见的一种标准模式 </li></ul><ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> </li></ul></ul><ul><li>标准模式 </li></ul><ul><ul><li><!DOCTYPE html> </li></ul></ul><ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;> </li></ul></ul><ul><li>怪异模式 </li></ul><ul><ul><li>没有 DOCTYPE 标记 </li></ul></ul>
    9. 9. IE8 的模式异常复杂 <ul><li>IE8 有三种模式: Standards, Quirks, IE7 </li></ul><ul><li>IE8 使用异常复杂的方式来判断使用何种模式进行渲染: </li></ul><ul><ul><li>X-UA-COMPATIBLE HTTP header </li></ul></ul><ul><ul><li><meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=EmulateIE7&quot; > </li></ul></ul><ul><ul><li>DOCTYPE </li></ul></ul><ul><ul><li>blacklist </li></ul></ul>
    10. 10. 如何编写具有良好兼容性的网页 <ul><li>使用标准模式 </li></ul><ul><ul><li><!DOCTYPE html> </li></ul></ul><ul><li>阅读 W3C 的 CSS 标准 </li></ul><ul><ul><li>http://www.w3.org/TR/CSS2/ </li></ul></ul><ul><li>在 IE 及非 IE 浏览器上进行测试 </li></ul>

    ×