浏览器兼容性问题简介 --- 黄昊
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 15,367 views

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

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

Statistics

Views

Total Views
15,367
Views on SlideShare
15,186
Embed Views
181

Actions

Likes
10
Downloads
138
Comments
0

6 Embeds 181

http://www.xlnv.net 93
http://www.slideshare.net 52
http://weilaixu.cn 31
http://xlnv.net 2
http://www.weilaixu.cn 2
http://www.cssdiy.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • From why to how

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

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