Common css compatibility problems

Link dashed box

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

/** A, img, input, and other labels are clicked with a dotted box * removing it */. noDashedBox {outline: 0; blr: expression (this. onFocus = this. blur ());}

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;    _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 background image transparency: for ie6

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

/** Http://www.zhangxinxu.com/wordpress/2009/08/ +
* Ie6 % E4 % B8 % 8 Bpng % 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.bkjia.com/uploads/allimg/140611/1209455A8-0.png) no-repeat; _ background: none; _ filter: progid: DXImageTransform. microsoft. alphaImageLoader (enabled = 'true', sizingMethod = 'crop', src = 'HTTP: // www.bkjia.com/uploads/allianz 140611/1209455a8-0.png ');}

// Png transparent JavaScript solution http://www.zhangxinxu.com/study/js/png.jsif (! 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"; // Replace the transparent PNG Image

 } } }

Opacity transparency: The entire element is transparent, including the content in the element.

<!-- 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 transparency: only transparent to the background, the content will not be affected

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