菜鸟级前端（前段工作遇到的一些浏览器兼容问题）
一、ie6 PNGFix 透明图片解决办法
iepngfix_tilebg.js下载地址：http://www.dillerdesign.com/experiment/DD_belatedPNG/#usage
<!--[if IE 6]>
<script src="../js/b2c/iepngfix_tilebg.js"></script>
<script>
DD_belatedPNG.fix('.png'); //括号里面的.png为背景图片格式为PNG－24的className，可以多个ClassName用,号隔开使用，不过我们可以巧妙的将使用背景图 片为PNG格式的className都给它取一个统一的class="png"()（比如:<div class="className1 png"></div><div class="className2 png"></div>），这样我们就不用一个一个的去用逗号隔了
</script>
<![endif]-->
二、margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline; 例如： <#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}
三、Box Shadow 盒阴影
-moz-box-shadow: 2px 2px 3px #969696;
-webkit-box-shadow: 2px 2px 3px #969696; filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=145, Strength=3);
box-shadow的四个参数：
x-offset x轴偏移
y-offset y轴偏移
blur 模糊值
color of shadow 阴影颜色
四、jquery实现使元素在屏幕里上下左右居中
$(document).ready(function() {
jQuery.fn.center = function() {
this.css("position", "absolute");
this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
return this;
}
$("#id").center();
});
五、背景高度没变化
对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如: <div id=”page”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> 比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而 page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决 <div id=”page”> <div id=”bg” style=”float:left;width:100%”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div> </div> 再嵌入一个float left而宽度是100%的DIV解决之
六、IE6图片下有空隙
IE6下为什么图片下有空隙产生解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.
七、Border-Radius 圆角效果
<script src="curvycorners.js"></script>
.box{
width:200px;
height:100px;
background-color: #DDEEF6;
border:1px solid #DDEEF6;
border-radius: 6px;
// -webkit-border-radius: 6px;
// -moz-border-radius: 6px; 然后在上面的样式后面定义以下代码：
}
<script type="text/javascript">
curvyCorners.addEvent(window, 'load', initCorners);
function initCorners() {
var settings = {
tl: { radius: 6 },
tr: { radius: 6 },
bl: { radius: 6 },
br: { radius: 6 },
antiAlias: true
}
var settings2 = {
tl: { radius: 30 },
tr: { radius: 6 },
bl: { radius: 6 },
br: { radius: 30 },
antiAlias: true
}
curvyCorners(settings, "#myBox"); //settings与函数体内定义的变量相对应，id为圆角对象的值
curvyCorners(settings2, "#myBox2"); //如果一个页面有多个不同值的圆角，可以在上面设置不同的settings值
}
</script>
HTML代码如下：
<div class="box" id="myBox"> </div>
<div class="box" id="myBox2"> </div>
