浏览器兼容性问题小结

2,873 views
2,712 views

Published on

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
2,873
On SlideShare
0
From Embeds
0
Number of Embeds
408
Actions
Shares
0
Downloads
49
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

浏览器兼容性问题小结

  1. 1. 浏览器兼容性问题小结<br />http://adamlu.com/<br />空雁|Adam<br />
  2. 2. 浏览器兼容性从何而来?<br />设计师:为什么在不同的浏览器显示效果不一样?<br />前端:因为不同浏览器对于css样式表的解析不一样,所以导致样式乃至层布局发生变化,同时对于DOM的实现也不一致导致前端开发工作量的增加。<br />——> Web标准化<br />WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。<br />
  3. 3. CSS兼容性<br />A标签常见兼容性问题 L V H A<br />IE对CSS标准的支持缺陷<br />important<br />inherit<br />子选择器<br />非锚点:hover<br />非锚点:active<br />:focus<br />position:fixed<br />display:inline-block<br />IE的两种模式(Quirks/Standard)<br />CSS HACK<br />问题:你如何区分ie6/7/8 /ff/webkit/…<br />
  4. 4. Javascript兼容性<br />innerText/textContent<br />childNodes获取的节点<br />样式的float(styleFloat-ie,cssFloat-ff)/for(htmlFor-ie, for)/class(使用className)<br />表单的Input.type input.name<br />表单的disabled 属性<br />事件处理(keyCode, x, pageX)<br />getComputedStyle(el, null)/el.currentStyle<br />问题:判断ie浏览器的方法?<br />
  5. 5. 总结<br />使用标准的HTML标签<br />遵循W3C CSS规范,如书写顺序(font, border),命名规范,单位<br />尽量使用标准的属性<br />可以用JS模仿一些低版本IE不支持的CSS标准<br />尽量减少HACK的使用!!!<br />
  6. 6. 谢谢!<br />

×