各種瀏覽器下常見css的兼容問題集錦

2024-07-11 08:30:52

字體：大中小

來源：轉載

供稿：網友

下面我們來處理幾個常見的CSS兼容性問題

一、鏈接的虛線框問題

復制代碼

代碼如下:

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

復制代碼

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

二、固定定位

復制代碼

代碼如下:

<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

復制代碼

代碼如下:

<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 ; //替換透明PNG的圖片
} } }

上一篇：IE6與CSS樣式兼容問題匯總

下一篇：CSS控制DIV永遠固定在頁面底部不隨滾動而滾動

發表評論

共有條評論