网站变灰代码 兼容主流浏览器 为灾区祈祷

欢迎您访问我爱IT技术网，今天小编为你分享的编程技术是：【网站变灰代码 兼容主流浏览器 为灾区祈祷】，下面是详细的分享！

网站变灰代码 兼容主流浏览器 为灾区祈祷

首先，为雅安地震灾区遇难同胞默哀！

今天有很多网站的首页都变灰了，我们也找了很多变灰的方法，但是网上的大部分都不能够实现现在浏览器的兼容问题。这里我们找到一个CSS和一个JS代码，可以同时支持除IE10（我这边测试不变会）以为其它浏览器，IE6、IE7、IE8、IE9、谷歌浏览器、Opera、猎豹浏览器、360浏览器、傲游浏览器等主流浏览器。

下面这段代码支持IE6到IE9和谷歌内核浏览器：

html{filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-

filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);

filter: url("data:image/svg+xml;utf8, filter: url("data:image/svg+xml;utf8, \'grayscale\'> \'grayscale\'> 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/> #grayscale");

filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: 

grayscale(1);}

html{filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-

filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);

filter: url("data:image/svg+xml;utf8,\'grayscale\'>0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/>#grayscale");

filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: 

grayscale(1);}

另外Opera浏览器貌似不可以，就需要用到这段JS代码：

直接复制就可以用的，这两段代码基本上兼容了现在大部分浏览器，比那些其它的被复制了N遍的老代码好多了！效果展示：http://www.94897.com/

以上所分享的是关于网站变灰代码 兼容主流浏览器 为灾区祈祷，下面是编辑为你推荐的有价值的用户互动：

　　相关问题：DIV+CSS为了更好的兼容各浏览器，哪些代码必须写呢？

　　答：浏览器兼容,是个写div css老生常谈的问题了. 现在写css 不用 太多浏览器来来回回的校准,其实只要你代码写的规范,不冲突,计算准确,通常是不会出问题的. 写一个错误的css吧 padding-left:10px; float:left; 这样在ie6 浏览器下 就会出现双倍内边距... >>详细

　　相关问题：大型网站如何是如何解决浏览器兼容，用hack？

　　答：浏览器兼容问题一直困扰着很多WEB设计师,当然有时也困扰着我.它如附骨之蛆一般让人讨厌,在此我向各浏览器开发商表达一下问候. 有了问题自然要解决,在学习及应用WEB标准的过程我一直都在思考这些问题,解决这些问题.到后来问题越来越少了,已经很少... >>详细

　　相关问题：网站前台HTML+CSS+JAVASCRIPT代码浏览器兼容问题，...

　　答：一般也就一些属性会显示不正常。你写样式的时候把该定义的高度和宽度都定义了，一般就不会有太多的走样，真是有问题了，就用该浏览器审查一下元素，看看多出来的高度到底是哪个元素多出来的。 >>详细