火狐与IE的差异
JS中对于backgroundPosition:
IE6/7/8: 识别backgroundPositionX/Y,不识别backgroundPosition
FireFox/Opera: 识别backgroundPosition, 不识别backgroundPositionX/Y
Safari/Chrome: 识别backgroundPosition及backgroundPositionX/Y
注意:在火狐backgroundPosition="0px 12px"至少要在12后面加上一个px。否则火狐不识别!如果只是backgroundPosition="0 12"则无效。
CSS中:
(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>