Body背景居中在IE、FF的居中差异

来源:互联网 发布:淘宝退货发空包犯法吗 编辑:程序博客网 时间:2024/06/08 10:09
笔者在做下面这个网页的时候出现问题,发现设置背景图居中和div居中后,div实际和背景图并不重合,始终有1px的距离。
这在IE下显示,为960px边框为红色的div和背景图始终是有1像素的距离。
而在FireFox(以下简称FF)下,div和背景图是重合的。


在网页截图后在PS仔细检查。
我的显示分辨率是1366*768,在IE或者FF全屏的时候,拉动条占17像素,所以页面的有效宽度是1366-17=1349,那么我们要建立一个960px,设置居中,那距离两边的距离就必然有一个比另外一个大1个像素。
具体操作是这样的:
我的背景图为1010像素,960白色部分居中,两边各留25像素。
按说,这样的话还是不存在什么问题,我们已经将div和背景图都设置居中了,那不管左边界和右边界存在不存在1px大小的区别,都应该统一居中。最多是实际上的页面中心统一偏移左或者右1px。
可实际情况是,背景图和div的居中情况不一样。如果我们将背景图改为和div一样大小,为960px,然后会发现div的居中偏左1像素,


用尺寸标准示意图分析:


因页面的有效显示宽度为1349px,则其中心线为674.5px处,减去背景图的一半480px,为194.5,四舍五入,即背景图左边距页面最左边195px。
但为什么layout中心会较body小1px?只能解释为设置margin-left:auto;margin-right:auto;的形式的居中,和设置背景图background-position:center;的形式居中的算法(应该就是四舍五入还是小数归零的差别)不一样。而在FF里面,他们的算法是统一的。
废话不多说,解决问题才是关键。
我们设置背景图宽度为奇数,并且左边距比右边距少1px。本例中,背景图像素被改为961px,这样背景图的中心线为480.5,这样图左边界到页面左边的距离就是674.5-480.5=194,为整数,不存在四舍五入,也就和FF的统一了,又因为左边距为194px和layout左边距一致,重合。所以,问题就此解决。我们在FF里验证现在也重合了。
关键点:图片背景的左边距比右边距少1px,如果是GIF就留1个透明像素,如果是jpg就得是背景色。
 
0 0
原创粉丝点击