常见css的兼容问题

1、链接的虚线框问题

<!-- html --><a class="noDashedBox" href="#"><img src="http://j5.dfcfw.com/image/201406/20140603152217.png" /></a>

/*

 * a, img, input等标签点击时会带有虚线框

 * 去除它

*/

.noDashedBox {

    outline:0;

    blr:expression(this.onFocus=this.blur());

}

2、固定定位

<!-- html -->

<a class="fixedTop" href="#"><img src="http://j5.dfcfw.com/image/201406/20140603152217.png" /></a>

<a class="fixedBottom" href="#"><img src="http://j5.dfcfw.com/image/201406/20140603152217.png" /></a>

/*  css  */

.fixedTop {

    position:fixed;

    top:100px;

    left:50%;

    margin-left:500px;

    _position:absolute;

    _top:expression(eval(document.documentElement.scrollTop + 100));

}

.fixedBottom {

    position:fixed;

    bottom:50px;

    left:50%;

    margin-left:500px;

    _position:absolute;

    _top:expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight - 70));

}

3、png背景图片透明：for ie6、

<!-- html -->

<div class="pngOpacity"></div>

css解决方案

/*

 * http://www.zhangxinxu.com/wordpress/2009/08/ +

 * ie6%E4%B8%8Bpng%E8%83%8C%E6%99%AF%E4%B8%8D%E9%80%8F%E6%98%8E%E9%97%AE%E9%A2%98%E7%9A%84%E7%BB%BC%E5%90%88%E6%8B%93%E5%B1%95/

 *

 * ie6 png8 background 不能定位

*/

.pngOpacity {

    height:228px;

    background:url(http://www.zhangxinxu.com/study/image/png_test.png) no-repeat;

    _background:none;

    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=‘true‘, sizingMethod=‘crop‘, src=‘http://www.zhangxinxu.com/study/image/png_test.png‘);

}

js解决方案

// png透明的js解决方案  http://www.zhangxinxu.com/study/js/png.js

if (!window.XMLHttpRequest) {

    window.attachEvent("onload", enableAlphaImages);

}

function enableAlphaImages(){

    for (var i=0; i<document.all.length; i++){

            var obj = document.all[i];

            var bg = obj.currentStyle.backgroundImage;

            var img = document.images[i];

            if (bg && bg.match(/\.png/i) != null) {

                var img = bg.substring(5,bg.length-2);

                var offset = obj.style["background-position"];

                obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘"+img+"‘, sizingMethod=‘crop‘)";

                obj.style.background = "none";

        } else if (img && img.src.match(/\.png$/i) != null) {

            var src = img.src;

            img.style.width = img.width + "px";

            img.style.height = img.height + "px";

            img.style.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘"+src+"‘, sizingMethod=‘crop‘)"

            img.src = "http://s1.95171.cn/b/img/pixel.gif"; //替换透明PNG的图片

 } } }

4、 opacity透明：整个元素透明，包括元素里面的内容

<!-- html -->

<div class="opacity"><span style="color:yellow;">this is opacity text</span></div>

<div class="opacity"><span style="color:yellow;position:relative;">this is text that not opacity in ie</span></div>

.opacity {

    background: #000;

    filter:alpha(opacity=50);

    *zoom:1;   /* sometimes it is needed */

    opacity: 0.5;

font-size: 38px;

    color:#fff;

}

5、rgba透明：只对背景透明，内容不会受到影响

<!-- html -->

<div class="rgbaAlpha">red green blue and alpha</div>

/* css */

.rgbaAlpha {

    width:300px;

    height:auto;

    padding:50px;

    filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);

    background: rgba(0, 0, 0, 0.5);

font-size: 38px;

    color:#fff;

}

常见css的兼容问题