[color=red]JS中对于backgroundPosition:[/color]
IE6/7/8: 识别backgroundPositionX/Y,不识别backgroundPosition
FireFox/Opera: 识别backgroundPosition, 不识别backgroundPositionX/Y
Safari/Chrome: 识别backgroundPosition及backgroundPositionX/Y
注意:在火狐backgroundPosition="0px 12px"至少要在12后面加上一个px。否则火狐不识别!如果只是backgroundPosition="0 12"则无效。
[color=red]CSS中:[/color]
(1)设置float时,margin属性使IE会产生双倍距离。需要在引用margin的div设置display:inline;
如
(2)padding属性,使火狐的高宽变大,需要使用!important如:
(3) DIV浮动IE文本产生3象素的bug 左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.
其实这样也可以(只是以后用字体的地方都要重设字体的大小):
对于Img,我的方法是 xxx img{border:0px;font-size:0px;},而且宽高大小最好比图片稍大些。
(4)对于字体有差异的(个人遇到的问题)
(5) form表单的嵌套问题
当你布局合理的时候,还是在ie6乱了。而且你使用了form标签。
那么form要放在div之上。如
IE6/7/8: 识别backgroundPositionX/Y,不识别backgroundPosition
FireFox/Opera: 识别backgroundPosition, 不识别backgroundPositionX/Y
Safari/Chrome: 识别backgroundPosition及backgroundPositionX/Y
注意:在火狐backgroundPosition="0px 12px"至少要在12后面加上一个px。否则火狐不识别!如果只是backgroundPosition="0 12"则无效。
[color=red]CSS中:[/color]
(1)设置float时,margin属性使IE会产生双倍距离。需要在引用margin的div设置display:inline;
如
#div{
float:left;
margin:10px 0 0 0;
display:inline;
}
(2)padding属性,使火狐的高宽变大,需要使用!important如:
#div{
padding: 7px 0 0 0;
height: 26px !important; /**火狐padding会增加高宽*/
height: 33px;//顺序好像是这样子的。可以尝试一下
}
(3) DIV浮动IE文本产生3象素的bug 左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键} <div id="box"> <div id="left"></div> <div id="right"></div> </div>
其实这样也可以(只是以后用字体的地方都要重设字体的大小):
*{font-size:0px}
对于Img,我的方法是 xxx img{border:0px;font-size:0px;},而且宽高大小最好比图片稍大些。
(4)对于字体有差异的(个人遇到的问题)
*{
padding:0px;
margin:0px;
text-align: center;
}
body{
margin: auto;
text-align: center;
font-size: 13px;
word-spacing: 100%;
font-family: 宋体;
}
(5) form表单的嵌套问题
当你布局合理的时候,还是在ie6乱了。而且你使用了form标签。
那么form要放在div之上。如
//这样比较好
<form>
<div></div>
</form>
//这样有时候是错的
<div>
<form></form>
</div>