compatibility issues with common CSS

1. Linked Dashed box issues

<!--html--><a class= "Nodashedbox" href= "#" ></a> / * * A, IMG, input and other tags will be clicked with a dashed box * * Remove it * /. Nodashedbox {    outline:0;    Blr:expression (this. onfocus=.blur ());}

2. Fixed positioning

<!--html--><a class= "Fixedtop" href= "#" ></a> <a class=" Fixedbottom "href=" # "></a>

/*   CSS  */. fixedtop {    position:fixed;    top:100px;    Left:50%;    Margin-left:500px;    _position:absolute;     +));} . fixedbottom {    position:fixed;    bottom:50px;    Left:50%;    Margin-left:500px;    _position:absolute;     + document.documentelement.clientheight-70));}

3,PNG background picture transparent: for IE6,

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

CSS Solutions

/* * 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 cannot be located */. 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 Solution

//PNG transparent JS solution http://www.zhangxinxu.com/study/js/png.jsif(!window. XMLHttpRequest) {window.attachevent ("OnLoad", enablealphaimages);} functionenablealphaimages () { for(vari=0; i<document.all.length; i++){            varobj =Document.all[i]; varBG =Obj.currentStyle.backgroundImage; varIMG =Document.images[i]; if(BG && bg.match (/\.png/i)! =NULL) {                varimg = bg.substring (5,bg.length-2); varoffset = 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) {            varsrc =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";//Replace a picture of a transparent PNG} } }

4, opacity transparent: The entire element is transparent, including elements inside the content

<!--HTML--><div class= "opacity" ><span style= "Color:yellow;" > This is opacity text</span></div> <div class= "opacity" ><span style= "color:yellow; position:relative; " > this in ie</span></div>

. Opacity {    background: #;    Filter:alpha (opacity=50);     *zoom:1;   /*  *    /0.5;     Font-size:38px;    Color: #fff;    }

5,Rgba transparent: Only transparent to the background, the content will not be affected

<!--html--><div class= "Rgbaalpha" >red green Blue and alpha</div>

/**/. 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;}