做网络优化哪家公司比较好,系统优化工具,野望王绩翻译,织梦做淘宝客网站视频HTML5标签兼容方案#xff1a;html5shiv.js [GitHub地址#xff1a;https://github.com/aFarkas/html5shiv/] IE8不支持HTML5的新标签#xff0c;如header、nav等标签在IE8无法渲染。html5shiv.js可帮助IE6-8浏览器兼容HTML5语义化标签。 使用方法#xff…HTML5标签兼容方案html5shiv.js [GitHub地址https://github.com/aFarkas/html5shiv/] IE8不支持HTML5的新标签如header、nav等标签在IE8无法渲染。html5shiv.js可帮助IE6-8浏览器兼容HTML5语义化标签。 使用方法在页面中引用html5shiv.js文件。必须添加在页面的元素内因为IE浏览器必须在元素解析前知道这个元素所以这个js文件不能在页面底部引用。 CSS3媒体查询兼容方案Respond.js [GitHub地址https://github.com/scottjehl/Respond] IE8不支持CSS媒体查询对响应式设计大大不利。Respond.js可帮助IE6-8兼容“min/max-width”媒体查询条件。 使用方法在页面中所有css文件的引用位置之后引用Respond.js。而且Respond.js的引用得越早用户看到页面闪烁的机会越小。 CSS3字体单位“rem”兼容方案rem.js [GitHub地址https://github.com/chuckcarpenter/REM-unit-polyfill] CSS3引入了新的字体大小单位rem与em的“相对于其父元素来设置字体大小”的功能不同rem是相对于根元素html的字体大小比率单位成了目前主流的单位之一。IE9开始支持IE8就只能通过引入js库来支持了。 使用方法在页面中引用rem.js文件。需要引用在页脚也就是末尾在所有css文件引用和DOM元素之后 CSS3“background-size”属性的“cover”和“contain”属性值兼容方案background-size polyfill [GitHub地址https://github.com/louisremi/background-size-polyfill] “background-size”是CSS3新引入的属性其中有两个属性值非常常用分别为“cover”和“contain”。“cover”可以把背景图像扩展至足够大以使背景图像完全覆盖背景区域背景图像的某些部分也许无法显示在背景定位区域中。“contain”可以把图像图像扩展至最大尺寸以使其宽度和高度完全适应内容区域。IE8同样不支持非常不方便。这时可以引用“background-size polyfill”库来兼容。 使用方法与以上几个库不同“background-size polyfill”的代码文件需要在css中引用。在所有用到这两个“background-size”属性值的地方加一行“-ms-behavior”属性 .selector { background-size: cover;/* 以下相对路径是相对于文档而非css文件 *//* 使用绝对路径可以避免混淆 */-ms-behavior: url(/backgroundsize.min.htc);
} JS数组的forEach方法兼容方案自行实现 IE8的数组对象没有forEach方法晕。所以自行声明即可代码如下 if ( !Array.prototype.forEach ) {Array.prototype.forEach function forEach( callback, thisArg ) {var T, k;if ( this null ) {throw new TypeError( this is null or not defined );}var O Object(this);var len O.length 0;if ( typeof callback ! function ) {throw new TypeError( callback is not a function );}if ( arguments.length 1 ) {T thisArg;}k 0;while( k len ) {var kValue;if ( k in O ) {kValue O[ k ];callback.call( T, kValue, k, O );}k;}};
} SVG图形兼容方案优雅降级 [参考文章http://www.zhangxinxu.com/wordpress/2013/09/svg-fallbacks/] 对于svg图形是真的无法直接兼容了因此使用优雅降级在IE8下显示替代的jpg、png或gif图片。有三种比较实用的方法一是用js修改的src属性这里省略二是用HTML的hack实现优雅降级类似于如下代码 svg width96 height96image xlink:hrefsvg.svg srcsvg.png width96 height96 /
/svg 支持svg标签的浏览器会显示svg.svg老版本浏览器会无视svg标签渲染image标签从而显示svg.png。 此外还有一种比较巧妙的方法 img srcimage.svg onerrorthis.srcimage.png 此法有弊端当image.png出现问题无法载入时会陷入死循环。 Canvas兼容方案Excanvas.js [下载地址http://code.google.com/p/explorercanvas/downloads/list] Canvas的功能非常强大兼容IE8的工作也很繁巨。可能有很大一部分情况要用优雅降级但是一些情况下可以使用Google出的Excanvas.js库。它是利用IE支持的VML对象来模拟Canvas的绘图的有些情况下可用但无法穷尽Canvas的所有功能。 使用方法在页面中引用Excanvas.js文件最好在head标签中。 [具体注意事项可以参考文章http://rockyuse.iteye.com/blog/1618298] 转载于:https://www.cnblogs.com/Ivy-s/p/7452359.html
