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就得是背景色。
这在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
- Body背景居中在IE、FF的居中差异
- 在IE与FF中如何居中
- div 居中(IE FF)
- ff/IE页面居中的问题
- FF,IE浏览器的居中问题
- 兼容IE、FF 的屏幕居中div提示信息框
- 兼容IE和FF的居中弹出窗口
- div在body中居中
- body居中
- IE中居中,FF中出问题
- body下面的内容居中
- ff的居中显示问题
- 网页在IE浏览器的居中办法:
- 在IE中不能居中的问题!!!
- 设置body的背景图片在网页的顶部居中
- IE和FF的差异
- 背景居中的方法
- 让div在body中居中对齐
- java.lang.ClassNotFoundException: com.mysql.jdbc.Driver
- vi/vim常用命令/
- Android AsyncTask异步实现大文件下载
- 原研哉—《欲望的教育》
- 02JsDom--获取页面元素
- Body背景居中在IE、FF的居中差异
- poj3067 Japan
- poj2155 Matrix
- 一 搜索引擎初步
- poj2299 Ultra-QuickSort
- eclipse的classpath小记
- hadoop编程入门学习笔记-4 ChainMapper、DistributedCache和Context
- iOS之 基于UIImageView的图片浏览器
- ubuntu14.04,安装Chrome(谷歌浏览器)