常见css兼容问题

链接的虚线框问题

<!-- 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());
}

固定定位

<!-- 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));
}

png背景图片透明：for ie6

<!-- html -->
<div class="pngOpacity"></div>

按 Ctrl+C 复制代码

按 Ctrl+C 复制代码

// 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的图片

 } } }

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;    
}

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;
}