1、链接的虚线框问题
<!-- html --><a class="noDashedBox" href="#"><img src="http://j5.dfcfw.com/image/201406/20140603152217.png" /></a> /* * a, img, input等标签点击时会带有虚线框 * 去除它 */ .noDashedBox { outline:0; blr:expression(this.onFocus=this.blur()); }
2、固定定位
<!-- html --> <a class="fixedTop" href="#"><img src="http://j5.dfcfw.com/image/201406/20140603152217.png" /></a> <a class="fixedBottom" href="#"><img src="http://j5.dfcfw.com/image/201406/20140603152217.png" /></a>
/* 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)); }
3、png背景图片透明:for ie6、
<!-- html --> <div class="pngOpacity"></div>
css解决方案
/* * http://www.zhangxinxu.com/wordpress/2009/08/ + * ie6%E4%B8%8Bpng%E8%83%8C%E6%99%AF%E4%B8%8D%E9%80%8F%E6%98%8E%E9%97%AE%E9%A2%98%E7%9A%84%E7%BB%BC%E5%90%88%E6%8B%93%E5%B1%95/ * * ie6 png8 background 不能定位 */ .pngOpacity { height:228px; background:url(http://www.zhangxinxu.com/study/image/png_test.png) no-repeat; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=‘true‘, sizingMethod=‘crop‘, src=‘http://www.zhangxinxu.com/study/image/png_test.png‘); }
js解决方案
// png透明的js解决方案 http://www.zhangxinxu.com/study/js/png.js if (!window.XMLHttpRequest) { window.attachEvent("onload", enableAlphaImages); } 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 = "http://s1.95171.cn/b/img/pixel.gif"; //替换透明PNG的图片 } } }
4、 opacity透明:整个元素透明,包括元素里面的内容
<!-- html --> <div class="opacity"><span style="color:yellow;">this is opacity text</span></div> <div class="opacity"><span style="color:yellow;position:relative;">this is text that not opacity in ie</span></div>
.opacity { background: #000; filter:alpha(opacity=50); *zoom:1; /* sometimes it is needed */ opacity: 0.5; font-size: 38px; color:#fff; }
5、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); font-size: 38px; color:#fff; }