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