解决IE6 PNG背景灰不透明的代码(js)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script>
jQuery.fn.outerHTML = function(s) {
return (s) ? this.before(s).remove() : jQuery("<p>").append(this.eq(0).clone()).html();
}
function AutoFixPNG(oImgs__) { //解决IE6 PNG背景灰不透明
if (oImgs__.size() == 0) { return; }
var ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1);
var ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1);
if (jQuery.browser.msie && (ie55 || ie6)) {
//fix images with png-source
oImgs__.each(function() {
var imgName = $(this).attr('src').toUpperCase();
if (imgName.substring(imgName.length - 3, imgName.length) == "PNG") {
$(this).attr('width', $(this).width());
$(this).attr('height', $(this).height());
var prevStyle = '';
var strNewHTML = '';
var imgId = ($(this).attr('id')) ? 'id="' + $(this).attr('id') + '" ' : '';
var imgClass = ($(this).attr('class')) ? 'class="' + $(this).attr('class') + '" ' : '';
var imgTitle = ($(this).attr('title')) ? 'title="' + $(this).attr('title') + '" ' : '';
var imgAlt = ($(this).attr('alt')) ? 'alt="' + $(this).attr('alt') + '" ' : '';
var imgAlign = ($(this).attr('align')) ? 'float:' + $(this).attr('align') + ';' : '';
var imgHand = ($(this).parent().attr('href')) ? 'cursor:hand;' : '';
if (this.style.border) {
prevStyle += 'border:' + this.style.border + ';';
this.style.border = '';
}
if (this.style.padding) {
prevStyle += 'padding:' + this.style.padding + ';';
this.style.padding = '';
}
if (this.style.margin) {
prevStyle += 'margin:' + this.style.margin + ';';
this.style.margin = '';
}
var imgStyle = (this.style.cssText);
strNewHTML += '<span ' + imgId + imgClass + imgTitle + imgAlt;
strNewHTML += 'style="position:relative;white-space:pre-line;display:inline-block;background:transparent;' + imgAlign + imgHand;
strNewHTML += 'width:' + $(this).width() + 'px;' + 'height:' + $(this).height() + 'px;';
strNewHTML += 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\'' + $(this).attr('src') + '\', sizingMethod=\'scale\');';
strNewHTML += imgStyle + '"></span>';
if (prevStyle != '') {
strNewHTML = '<span style="position:relative;display:inline-block;' + prevStyle + imgHand + 'width:' + $(this).width() + 'px;' + 'height:' + $(this).height() + 'px;' + '">' + strNewHTML + '</span>';
}
//$(this).outerHTML(strNewHTML);
$(this).after(strNewHTML);
$(this).css('display', 'none');
}
});
}
}
</script>
<div id="taskWorksBlock" style="width:250px; height:250px;">
<div class="item" style="width:200px; height:200px">
<div class="thumb">
<div class="winicon" style="padding-left: 0px; position: absolute;"><img src='http://www.epweike.com/skin/1/images/icon_zhongbiao.png' title='中标啦' border=0 /></div>
<a href="/taskView.asp?urltag=opusitem&opusid=104012&n=163465#wodejiaogao" title=""><img src="http://www.epweike.com/upload/964/45964/2012013000173694530_s.jpg" alt="" hasLarge="hasLarge" __onerror="this.src='http://www.epweike.com/images/lazyload/wutu.gif'" onload="javascript:DrawImage(this);"/></a>
</div>
<div class="desc"><strong>点点工作室</strong></div>
</div>
</div>
<script>
$(function() {
AutoFixPNG($("#taskWorksBlock .winicon img"));
});
</script>
ps: 最好不要直接在css代码里写 滤镜filter等, 图片一多会造成cpu飙高页面卡死。本人是深有体会的。
上面是本人修改的最好办法(参照了网上的代码)