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

CSS hack IE常见兼容性问题

猜你喜欢