IE和FF背景图片居中的偏移差异
作者:dangbao 日期:2009-04-21
今天在做公司的一个企业站,用的是一个左右有固定宽度阴影的图片做大背景。让中间的内容部分看起来很充实很有质感,这也是企业站常用的设计方法。记得在刚学网页用TABLE布局的时候就弄过这样的页面。过去基本不会考虑浏览器尺寸和兼容性的问题,所以几乎很快就做好了。在考虑浏览器兼容和分辨率大小的情况下,用XHMTL布局就发现了这样的差异:IE和FF对大背景图片居中的解释居然不同,其它浏览器则和IE的显示相同。在消除了hmtl、body、div等的默认属性后,我开始这样写:按照这样的描述,背景图片是随分辨率和窗口的大小的改变后居中显示。可是我发现在IE中是正常的,FF下却明显的偏移了2px。开始我以为是IE和FF解释的容器宽度不同导致的,但无论我如何更改容器宽度,在FF下,容器的边和背景始终贴不到一起。添加属性overflow:hidden也不可以。于是我又修改了写法:显示不正常,尝试添加属性overflow:hidden后,显示居然一致了。当然,你也知道添加了overflow:hidden就不会出滚动条了,所以这还不是解决办法。尝试写overflow-x:hidden;overflow-y:auto这样也不行。所以,问题就在宽度解释上。
我又尝试在body下套一个大容器来包住所有内容。当然这样依旧不正常,我只好给容器设置一个宽度,然后margin:0 auto使其居中显示。哈哈,终于成功了。
看来,写了宽度以后,各浏览器的解释才会有共同结论。但是,如果页面左右的效果超过了1004px,那就会出现难看的横向滚动条了。所以,本人总结以下两点:
Code
body{background:#f3f3f3 url(../images/bg.gif) repeat-y center;}
Code
html{background:#f3f3f3 url(../images/bg.gif) repeat-y center;}
我又尝试在body下套一个大容器来包住所有内容。
Code
.page{background:#f3f3f3 url(../images/bg.gif) repeat-y center;}
看来,写了宽度以后,各浏览器的解释才会有共同结论。但是,如果页面左右的效果超过了1004px,那就会出现难看的横向滚动条了。所以,本人总结以下两点:
- 页面宽度要为左右阴影预留足够宽度。就目前主流来讲,宽度不要超过1004(17纯平下的宽度1024px减去滚动条的宽度)。目前网页的宽度流行尺寸为950和960。所以页面外左右的效果大约各在20px-25px之间展示。
- 在背景上做文章,做可以平铺的背景就不存在这个问题了;或者在页面的背景色和页面外的图片背景过渡均匀也没不会带来麻烦。(可查看各大网站的BLOG模板背景效果)
评论: 1 | 引用: 0 | 查看次数: -
发表评论
上一篇
下一篇

Tags:
文章来自:
网摘收藏:
回复
]