您现在的位置是:网站首页> 编程资料编程资料

各种浏览器下常见css的兼容问题集锦CSS背景色渐变写法兼容ie6至ie9css实现div水平、垂直居中兼容chrome、ie8IE6、IE7、IE8、Firefox兼容性CSS HACK代码及示例纯CSS实现背景半透明文字不透明效果兼容IE6IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总CSS背景图拉伸效果兼容FF/Chrome/IE等主流浏览器(亲测)

2021-09-06 895人已围观

简介 什么是浏览器兼容:当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个网站,或者页面的时候,会出现一些不兼容的问题,在这种浏览器下显示正常,在另一种下就乱了,我们在编写CSS的时候会很恼火,刚修复了这个浏览器的问题,结果另外一个浏览器却出了新问题。

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

一、链接的虚线框问题


复制代码
代码如下:




复制代码
代码如下:

/*
* a, img, input等标签点击时会带有虚线框
* 去除它
*/
.noDashedBox {
outline:0;
blr:expression(this.onFocus=this.blur());
}

二、固定定位


复制代码
代码如下:




复制代码
代码如下:

/* 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背景图片透明:for ie6


复制代码
代码如下:




复制代码
代码如下:

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

function enableAlphaImages(){
for (var i=0; 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://img.jb51.net/b/img/pixel.gif"; //替换透明PNG的图片
} } }

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


复制代码
代码如下:


this is opacity text

this is text that not opacity in ie


复制代码
代码如下:

/* css */
.opacity {
background: #000;
filter:alpha(opacity=50);
*zoom:1; /* sometimes it is needed */
opacity: 0.5;

font-size: 38px;
color:#fff;
}

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


复制代码
代码如下:


red green blue and alpha


复制代码
代码如下:

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

相关内容

-六神源码网