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

Weitere ähnliche Inhalte

Ähnlich wie 浏览器兼容性问题小结

Postoffer前端架构设计
Postoffer前端架构设计Postoffer前端架构设计
Postoffer前端架构设计
fangdeng
 
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
洧杰 廖
 
前端性能测试
前端性能测试前端性能测试
前端性能测试
tbmallf2e
 
布局原理
布局原理布局原理
布局原理
enmaai
 
CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練
Joseph Chiang
 

Ähnlich wie 浏览器兼容性问题小结 (20)

S_E_O
S_E_OS_E_O
S_E_O
 
2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪
 
第7章
第7章第7章
第7章
 
Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)
 
淘宝网前端开发面试题
淘宝网前端开发面试题 淘宝网前端开发面试题
淘宝网前端开发面试题
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
 
前端总结
前端总结前端总结
前端总结
 
谷歌搜索引擎优化初学者指南
谷歌搜索引擎优化初学者指南谷歌搜索引擎优化初学者指南
谷歌搜索引擎优化初学者指南
 
Postoffer前端架构设计
Postoffer前端架构设计Postoffer前端架构设计
Postoffer前端架构设计
 
Bootstrap 導入分享
Bootstrap 導入分享Bootstrap 導入分享
Bootstrap 導入分享
 
常用Js框架比较
常用Js框架比较常用Js框架比较
常用Js框架比较
 
漫谈web前端
漫谈web前端漫谈web前端
漫谈web前端
 
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
 
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
 
CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享
 
前端性能测试
前端性能测试前端性能测试
前端性能测试
 
布局原理
布局原理布局原理
布局原理
 
Download
DownloadDownload
Download
 
CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練
 
基于Seajs的项目构建
基于Seajs的项目构建基于Seajs的项目构建
基于Seajs的项目构建
 

Mehr von Adam Lu (13)

Yui rocks
Yui rocksYui rocks
Yui rocks
 
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
 
一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps
 
HTML5概览
HTML5概览HTML5概览
HTML5概览
 
Get started with YUI
Get started with YUIGet started with YUI
Get started with YUI
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
 
HTML5 on Mobile(For Designer)
HTML5 on Mobile(For Designer)HTML5 on Mobile(For Designer)
HTML5 on Mobile(For Designer)
 
重新认识Html5
重新认识Html5重新认识Html5
重新认识Html5
 
小谈Javascript设计模式
小谈Javascript设计模式小谈Javascript设计模式
小谈Javascript设计模式
 
从Adobe和qcof会议看前端开发
从Adobe和qcof会议看前端开发从Adobe和qcof会议看前端开发
从Adobe和qcof会议看前端开发
 
揭秘Html5和Css3
揭秘Html5和Css3揭秘Html5和Css3
揭秘Html5和Css3
 
Enhance Web Performance
Enhance Web PerformanceEnhance Web Performance
Enhance Web Performance
 

浏览器兼容性问题小结