一.Polyfill是什么?
Polyfill的准确意思为:用于实现浏览器并不支持的原生API的代码。
例如,querySelectorAll是很多现代浏览器都支持的原生Web API,但是有些古老的浏览器并不支持,那么假设有人写了库,只要用了这个库, 你就可以在古老的浏览器里面使用document.querySelectorAll,使用方法跟现代浏览器原生API无异。那么这个库就可以称为Polyfill或者Polyfiller。
那么问题就来了。jQuery是不是一个Polyfill?答案是No。因为它并不是实现一些标准的原生API,而是封装了自己API。一个Polyfill是抹平新老浏览器 标准原生API 之间的差距的一种封装,而不是实现自己的API。
已有的一些Polyfill,如 Polymer 是让旧的浏览器也能用上 HTML5 Web Component 的一个Polyfill。FlashCanvas是用Flash实现的可以让不支持Canvas API的浏览器也能用上Canvas的Polyfill。
这里有一堆Polyfills:HTML5 Cross Browser Polyfills
二.Modernizr、HTML5Shiv、respond.js三者的区别?
- HTML5Shiv主要解决HTML5提出的新的元素不被IE6-8识别。
- Respond.js 是一个快速、轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性,实现响应式网页设计(Responsive Web Design)。
- Modernizr 是一个开源的JS库,最初主要用于检测浏览器的新特性支持情况,现在默认包含了html5shiv的能力。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发,同时又不会牺牲其他不支持这些新技术的浏览器的控制。
总结:
- 一般情况下HTML5Shiv、respond这2个搭配使用。
- Modernizr 包括那2个,并且比他们更强大一些。
三.经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?
-
png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.
-
浏览器默认的margin和padding不同。解决方案是加一个全局的
*{margin:0;padding:0;}
来统一。 -
IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用
getAttribute()
获取自定义属性;Firefox下,只能使用getAttribute()
获取自定义属性。解决方法:统一通过getAttribute()
获取自定义属性。 -
IE下,even对象有
x
,y
属性,但是没有pageX
,pageY
属性;Firefox下,event对象有pageX
,pageY
属性,但是没有x
,y
属性。
//解决方案:
var page = {};
page.x = event.x ? event.x : event.pageX;
page.y = event.y ? event.y:event.pageY;
- Chrome 中文界面下默认会将小于12px的文本强制按照12px显示,可通过加入CSS属性
-webkit-text-size-adjust: none;
解决。 - 超链接访问过后hover样式就不出现了,被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:L-V-H-A :
a:link {} a:visited {} a:hover {} a:active {}