兼容性问题——让人恨得咬牙的IE

SlideDeck v.1.2.2 Lite Example

今天去新公司，东西拿出来之后，说是要兼容IE6,当时我一脸懵逼。可是在我大天朝，必须的做啊。

吐槽完毕，开始干活。

1.各主流浏览器兼容标识一览表

 

标记IE6IE7IE8firefoxOperachrome
[*+><] √ √ × × × ×
- √ × × × × ×
\9 √ √ √ × × ×
\0 × × √ × √ ×
@media screen and (-webkit-min-device-pixel-ratio:0){.bb {}} × × × × × √
.bb , x:-moz-any-link, x:default × √ × √(ff3.5及以下) × ×
@-moz-document url-prefix(){.bb{}} × × × √ × ×
@media all and (min-width: 0px){.bb {}} × × × √ √ √
* +html .bb {} × √ × × × ×
浏览器内核 Trident Trident Trident Gecko Presto webkit

2.浏览器不支持hover 怎么办？别担心，有它！csshover.htc 

调用代码.放到<head><head>中间：
<!--[if lte IE 6]> 
<style type="text/css">
body { behavior:url("csshover3.htc"); }  
</style>
<![endif]-->
就可以用了哦
3.IE不支持png格式的图片
 （1）用滤镜解决
background-image:url(icon_home.png)!important;  /* FF IE7 */
background-repeat: no-repeat; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’icon_home.png’);  /* IE6 */
_ background-image: none; /* IE6 */
（2）DD_belatedPNG插件 
　　DD_belatedPNG支持backgrond-position和background-repeat,同时DD_belatedPNG还支持a:hover属性,以及<img>. 
　　这个插件使用了微软的VML语言进行绘制,而其他多数解决PNG问题的方法用的是AlphaImageLoader滤镜，插件DD_belatedPNG下载地址以及具体使用方法。
具体使用方法如下：
<!--[if IE 6]> 
<script src="DD_belatedPNG.js" mce_src="DD_belatedPNG.js"></script> 
<script type="text/javascript"> 
DD_belatedPNG.fix('.png');// .png改成使用了透明PNG图片的选择器 
</script> 
<![endif]--> 
今天试了下，挺好用的。 
好，就这么多吧
posted @ 2016-06-02 22:37  white2016  阅读(97)  评论(0)    收藏  举报