各种浏览器下常见css的兼容问题集锦

前端技术 2023/09/03 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.phpstudy.net/b/img/pixel.gif\">http://img.phpstudy.net/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>


复制代码
代码如下:

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

本文地址：https://www.stayed.cn/item/6960

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案