标签：blog   http   io   ar   color   os   sp   on   div   

关于CSS Hack的东西能少尽量少吧。发现这篇文章我写得太复杂了，所以重新精简了一下，把代码粘贴到jsfiddle上，方面修改代码和维护。

1, IE条件注释法，微软官方推荐的hack方式。

只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器上显示
<![endif]-->

只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器上显示
<![endif]-->

只在IE6以上版本生效
<!--[if gt IE 6]>
这段文字只在IE6以上版本IE浏览器上显示
<![endif]-->

只在IE7上不生效
<!--[if ! IE 7]>
这段文字在非IE7浏览器上显示
<![endif]-->

非IE浏览器生效
<!--[if !IE]><!-->
这段文字只在非IE浏览器上显示
<!--<![endif]-->

2.综合一下常用的CSS Hack代码 

Edit in JSFiddle

.csshack{
    background:blue;
    background:blue\9; /*all ie*/
    background:blue\0/; /*ie8-ie9*/
    background/*\**/: blue\9; /* ie7-ie8*/
    *background:blue;/* or #background: blue */ /*ie6-ie7*/    
    +background:blue; /*ie7*/
    _background:blue; /*ie6*/
}
:root .csshack{
    background:blue; /*大于等于ie9*/
}
/* IE9, IE10 */
@media screen and (min-width:0\0) {
    .csshack { color: red}
}
/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #veintiun { color: red; }
}
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}
/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

/* FF 3.5+ */
body:not(:-moz-handler-blocked) #cuarenta { color: red; }

3.IE CSS Media，来自这里 3.IE CSS Media，来自这里

/* @media hacks */

/* IE6/7 only (via Keith Clarke) */
@media screen\9 { }

/* IE6/7/8 (via Keith Clarke) */
@media \0screen\,screen\9 {}

/* IE8 (via Keith Clarke) */
@media \0screen { }

/* IE8/9/10 */
@media screen\0 { }

/* IE9/10 */
@media screen and (min-width:0\0) {
    body { background: yellow; }
} 

4.button重置css样式兼容ie6,ie7

button在IE6、IE7下的兼容性，需要充值css为overflow:visible

5.让IE6支持max-width,min-width

.sector{max-width:500px; _width:expression((documentElement.clientWidth>500)?"500px":"auto");

min-width:300px; _width:expression((documentElement.clientWidth<300)?"300px":"auto");}

6.IE6下某些情况line-height无效

当在一个容器里文字和img、input、textarea、select、object等元素相连的时候，对这个容器设置的line-height数值会失效； 同时以上元素的行高可能×2。
受影响的浏览器： Microsoft Internet Explorer 5.01 / Windows Microsoft Internet Explorer 5.5 / Windows Microsoft Internet Explorer 6

解决办法：
对和文字相连接的img、input、textarea、select、object等元素加以属性：
{margin: (所属line-height-自身img,input,select,object高度)/2px 0;vertical-align:middle;}

CSS Hack代码与浏览兼容总结

标签：blog   http   io   ar   color   os   sp   on   div   

原文地址：http://www.cnblogs.com/cyweb/p/4120768.html