100%宽度div在改变浏览器窗口大小时背景截断情况的解决办法

100%宽度的div设有背景图片,如果浏览器窗口宽度小于内容宽度,将出现背景"截断"情况。

这是一个经典且常见的问题,通常会出现在网站的顶部。

不论是音乐小站还是门户大站都没有"逃过此劫"···

音乐站:http://www.520music.com/Art/520music.com_1.htm(在IE6和FF下缩小浏览器窗口,页面底部发生背景"截断"情况)

门户站:http://www.163.com/  http://www.qq.com/ (163在FF下,qq在IE下缩小浏览器窗口都会发生类似情况),还有qihoo,其实都是这样。

这里有个具体的例子:demo

那么,怎么才能解决这个问题呢?

下面,给出几种解决的办法:

第一种:在100%宽度的div里再嵌套一层div,给这个div同样设一样bg即可。demo

第二种:用表达式加min-width实现。demo

个人推荐使用第一种方法来解决这个问题,虽然增加了一层div,但总比表达式要好,我觉得表达式这种东西就交给js吧···

Write a comment