CSS hack IE常见兼容性问题_综合

1、hack是什么？
Hack是基于开源的程序的基础，对其代码进行增加、删除或者修改、优化，使之在功能上符合新的需求。
2、css hack是什么？
不同的浏览器，对css样式兼容不同，css hack就是针对浏览器的不同，编写不同的css样式。
3.css兼容方式
（1）浏览器对css中的关键字兼容
“\9″ IE6+都生效
“\0″ IE8+都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack
！important 可以被火狐和ie7所别
* 可以ie7所别
*+ 可以ie7和ie6所别
_ 可以ie6所别

demo

.div{ background:#000; /* 正常写法普遍支持 */ background:#00F\9; /* 所有IE浏览器(ie6+)支持 */ /*但是IE8不能识别“ * ”和“ _ ” */ [background:#000;background:#0F0; /* SF,CH支持 */ background:#00F\0; /* IE8支持*/ *background:#FF0; /* IE7支持 */ _background:#F00; /* IE6支持 */ }

（2）浏览器专用的注释

 <!--[if IE 7]><!--<link rel="stylesheet" type="text/css"href="ie7.css"/>-->
<![endif]-->

 <!--[if IE 6]><!--<link rel="stylesheet" type="text/css"href="ie6.css"/>-->
<![endif]-->

<!--[if lte IE 6]><!--<link rel="stylesheet" type="text/css" href="ie.css"/>-->
<![endif]-->

（3）对超链接的样式书写格式最好遵从L-V-H-A

<style type="text/css">a:link{
     };a:visited{
     };a:hover{
     };a:active{
     }; </style>

（4）li里面的文本过长以省略来显示

<style type="text/css">li{width: 36px;white-space: nowrap;text-overflow: ellipsis;o-text-overflow: ellipsis;overflow: hidden;} </style>

（5）将文本框里面的文本对齐

<style type="text/css">input{vertical-align: middle; }</style>

（6）浏览器设置固定高度时，是不会像ie6那样被撑开的，如果像要像ie6那样被撑开，要将高度设置min-height

<style type="text/css">div{height: 200px;min-height: 200px;height: auto !important; } </style>

（7）FireFox对div与div之间的空格是忽略，而ie6则是会对其进行处理，这样会造成格式不正确的情况。

（8）不同浏览器对透明度的兼容

div{background: red;opacity: 0.5;//正常标准-moz-opacity: 0.5;//FireFox兼容filter: alpha(opacity=0.5);//ie兼容}

（9）使用浮动属性后，ie6的外边距为实际边距的2陪，解决办法为：
display：inline

（10）ie6下的图片下方会有缝隙，解决方法为：添加display：block；或者是：verticla：top/middle/bottom/text-bottom

（11）css控制圆角，但是ie不支持圆角

div{border-radius: 5px;-moz-border-radius: 5px;-moz-border-radius-bottomleft: 5;-moz-border-radius-topleft:5 ;-moz-border-radius-bottomright:5 ;-moz-border-radius-topleft: 5;
}

（12）FireFox中的鼠标手势cursor属性对hand不支持，但是支持pointer，而ie则是两个都支持，所以为了兼容性都统一使用pointer