各種瀏覽器下常見css的兼容問題有哪些

這篇文章主要講解了“各種瀏覽器下常見css的兼容問題有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“各種瀏覽器下常見css的兼容問題有哪些”吧！

一、鏈接的虛線框問題

代碼如下:

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

代碼如下:

/*
* a, img, input等標簽點擊時會帶有虛線框
* 去除它
*/
.noDashedBox {
   outline:0;
   blr:expression(this.onFocus=this.blur());
}

二、固定定位

代碼如下:

<!-- html -->
<a class="fixedTop" href="#"><img src="image/201406/20140603152217.png" /></a></p> <p><a class="fixedBottom" href="#"><img src="mage/201406/20140603152217.png" /></a>

代碼如下:

/*  css  */
.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>

代碼如下:

/*
*
* ie6 png8 background 不能定位
*/
.pngOpacity {
   height:228px;
   background:url(image/png_test.png) no-repeat;
   _background:none;
   _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='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='"+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 = "<a href="http://img.jb51.net/b/img/pixel.gif">http://img.jb51.net/b/img/pixel.gif</a>"; //替換透明PNG的圖片
} } }

四、opacity透明：整個元素透明，包括元素里面的內容

代碼如下:

<!-- html -->
<div class="opacity"><span >this is opacity text</span></div></p> <p><div class="opacity"><span >this is text that not opacity in ie</span></div>

代碼如下:

/*  css  */
.opacity {
   background: #000;
   filter:alpha(opacity=50);
   *zoom:1;   /* sometimes it is needed */
   opacity: 0.5;</p> <p>    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);</p> <p>    font-size: 38px;
   color:#fff;
}

感謝各位的閱讀，以上就是“各種瀏覽器下常見css的兼容問題有哪些”的內容了，經過本文的學習后，相信大家對各種瀏覽器下常見css的兼容問題有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！