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吧···