CSS Hack 速查

建议:

以标准浏览器为准书写代码,如遇到兼容问题,尝试其他方法解决问题,在万不得已的情况下,采用 Hack 解决。

以下是我总结的HACK书写方法:

浏览器:仅限IE6+,FF,safari,chrome,opera;(截止到2011.10.12非IE均为最新版本)。

测试环境:windows系统;

(FF : firefox;    OP : opera;    SA : safari;    CH : chrome;    Y代表支持,    N代表不支持。)

标志符示例IE6IE7IE8IE9FFOPSACH
*.eq {*color:#000;}YY
_.eq {_color:#000;}Y
+.eq {+color:#000;}YY
.eq {-color:#000;}Y
>.eq {>color:#000;}YY
\0.eq {color:#000\0;}YYY
\9.eq {color:#000\9;}YYYY
\9\0.eq {color:#000\0;}N\YY
:root .xx{xxx:xxx\9;}:root .eq {color:#a00\9;}Y
*+.eq {*+color:#000;}YY
标志符示例IE6IE7IE8IE9FFOPSACH
*-.eq {*-color:#000;}Y
*html*html .eq {color:#000;}Y
*+html*+html .eq {color:#000;}Y
html*html* .eq {color:#000;}YY
[;.eq {color:red;[;color:blue;}YYYY
html>bodyhtml>body .eq {color:blue;}YYYYYYY
html>/**/bodyhtml>/**/body .eq {color:blue;}YYYYYY
html/**/>bodyhtml/**/>body .eq {color:blue;}YYYYYYY
@media all and (min-width:0px){}@media all and (min-width:0px){.eq {color:#000;}}YYYYY
*:first-child+html*:first-child+html .eq {color:blue;}Y
标志符示例IE6IE7IE8IE9FFOPSACH
*:first-child+html{} *html*:first-child+html{} *html .eq {color:blue;}Y
@-moz-document url-prefix(){}@-moz-document url-prefix(){ .eq {color:blue;}}Y
@media screen and (-webkit-min-device-pixel-ratio:0){}@media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}YY
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){}@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}Y
body:nth-of-type(1)body:nth-of-type(1) .eq {color:blue;}YYYYY

注意事项:

1、由于各浏览器更新神速,所以有些HACK可能会有变化,所以请大家注意。

2、[;此种方式会影响后续样式,不可取。

3、\9\0并非对所有属性都能区分IE8和IE9.比如:background-color可以,但background不可以,还有border也不可以。所以在实际用时要测试下。

4、当同时出现\0;*;_;时,推荐将\0写在*和_前面。例如:color:red\0;*color:blue;_color:green;可行,否则IE7和IE6里的效果会失效。但border例外,放在前后都可以。保险起见,还是放在前面。

推荐写法:

demo:

.eq { color:#f00;/*标准浏览器*/ color:#f30\0;/*IE8,IE9,opera*/ *color:#c00;/*IE7及IE6*/ _color:#600;/*IE6专属*/ } 

:root .eq {color:#a00\9;}/*IE9专属*/ 

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:#450;}}/*opera专属*/

@media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:#879;}}/*webkit专属*/ 

@-moz-document url-prefix(){ .eq {color:#4dd;}}/*firefox专属*/

Canvas灰度图

var context = canvas.get(0).getContext("2d");
var offlineImg = context.getImageData(0,0,40,40);
var pix = offlineImg.data;
for (var i = 0, n = pix.length; i < n; i += 4) {
	var grayscale = pix[i] * .3 + pix[i+1] * .59 + pix[i+2] * .11;
	pix[i] = pix[i+1] = pix[i+2] = grayscale;
}
context.putImageData(offlineImg,0,0);

 

IFrame 跨域自动高

先说一下不跨域的autoheight解决方案:iframe里

window.parent.frames[“frameId”].height=document.documentElement.scrollHeight

就可以。

如果跨域的话可以获取到window.parent这个对象,但是获取不到其他的对象,因为跨域。

但是可以这样解决:

在iframe里面再插入一个iframe,这个iframe是和最外层的同域的,即:

aaa.com/index.html – > bbb.com/iframe.html -> aaa.com/agent.html。

这个agent中可以用window.parent.parent来做上面提到的没有跨域做的那些事。

但是agent里也没有办法获取到他的parent即iframe.html的高。

解决办法是用js创建这个agent iframe,创建时将网页的高度作为参数穿进去如agent.html?height=800,agent里再根据这个参数设parent.parent