红狐与IE的差异

火狐与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>

查看更多 下一篇