昆明亚帆广告有限公司

今天小编跟大家讲解下有关各种浏览器下常见css的兼容问题集锦 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关各种浏览器下常见css的兼容问题集锦 的相关资料，希望小伙伴们看了有所帮助。

下面我们来处理几个常见的CSS兼容性问题

一、链接的虚线框问题

复制代码代码如下:<!-- html --><a class="noDashedBox"href=""><img src="https://www.aidi.net.cn//css/image/201406/20140603152217.png"/></a>

复制代码代码如下:.noDashedBox { outline:0; blr:expression(this.onFocus=this.blur());}

二、固定定位

复制代码代码如下:<!-- html --><a class="fixedTop"href=""><img src="https://www.aidi.net.cn//css/image/201406/20140603152217.png"/></a></p><p><a class="fixedBottom"href=""><img src="https://www.aidi.net.cn//css/mage/201406/20140603152217.png"/></a>

复制代码代码如下:.fixedTop { position:fixed; top:100px; left:50%; margin-left:500px; _position:absolute; _top:expression(eval(document.documentElement.scrollTop + 100));}</p><p>.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>

复制代码代码如下:.pngOpacity { height:228px; background:url(image/png_test.png) no-repeat; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='https://www.aidi.net.cn//css/image/png_test.png');}

复制代码代码如下:// png透明的js解决方案 if (!window.XMLHttpRequest) { window.attachEvent("onload", enableAlphaImages);}</p><p>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='https://www.aidi.net.cn//css/"+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='https://www.aidi.net.cn//css/"+src+"', sizingMethod='crop')"img.src ="<a href="http://img.aidi.net.cn/b/img/pixel.gif">http://img.aidi.net.cn/b/img/pixel.gif</a>"; //替换透明PNG的图片 } } }

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

复制代码代码如下:<!-- html --><div class="opacity"><span style="color:yellow;">this is opacity text</span></div></p><p><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; opacity: 0.5;</p><p> font-size: 38px; color:#fff; }

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

复制代码代码如下:<!-- 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);</p><p> font-size: 38px; color:#fff;}

来源：爱蒂网