问题出现的来由:
在网页应用margin-top属性时,发现IE和firefox下虽然有相同的值,但是具有不同的偏移量。
改进后:
#simple{
position:absolute;
margin-top:30px; /*for IE*/
margin-top:35px !important;/*for Firefox*/
}
注意:IE不识别 !important。其次,定义顺序,IE以最后一个属性的定义为最终的网页识别定义,虽然不识别!important,但是,IE识别了35px这个高度设置,在Firefox和Chrome下位置定位成功了,但是在IE下又失败了,下移了5个像素。
调整顺序,如下:
#simple{
position:absolute;
margin-top:35px !important;/*for Firefox*/
margin-top:30px; /*for IE*/
}
以为会成功,结果又失败了,其实Firefox也是识别最后一个属性定义值的。所以笔者紧急调用小宇宙,第一,必须解决定义的准确性,第二,必须解决不同浏览器的兼容问题,并且分开定义。
于是:
(1)在属性定义时,先做完整的闭合处理,即
margin:30px 0 0 0; /*上、右、下、左*/
(2)特别定义IE能识别,而其它浏览器不识别的处理,即
*margin:30px 0 0 0; /*IE 6, IE 7, IE 8 可识别*/
(3)定义两个margin,其中一个只让IE识别,另一个做一般化处理,即:
*margin:30px 0 0 0; /*IE 6, IE 7, IE 8 可识别*/
margin:35px 0 0 0; /*一般化定义,也注意闭合,并且定义往下多占据5个像素*/
完整代码如下:
#simple{
position:absolute;
margin:35px 0 0 0;/*For ALL*/
*margin:30px 0 0 0; /*for IE6,7,8*/
}
测试,成功!
注意:仍然需要注意定义的顺序,如果颠倒顺序,IE最后仍识别margin-top:35px的属性。其它浏览器识别了第一个一般化定义之后,就不去关注*margin设置了,而IE识别了最后的*margin值,及top是30px的值,因此定义成功。
在这里,我们忽略了,由于一开始我所说的其它属性设置的兼容性影响,单独做margin的处理,这样,无论其它属性是否兼容,而最后这样的设置,使得高度和margin都兼容了!
IE和Firefox下margin的区别
最新推荐文章于 2022-01-16 22:06:21 发布