首页 > 网页教程 > CSS > 缩小窗口时CSS背景图出现右侧空白BUG的解决方法

缩小窗口时CSS背景图出现右侧空白BUG的解决方法

时间:2013-05-21    来源:互联网

页面容器(#wrap)与页面头部(#header )为100%宽度。而内容的容器(#page)为固定宽度960px。浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异。如下图所示窗口宽度大于内容层宽度:

width:100%缩小窗口时背景图片出现空白bug

改变浏览器窗口的大小,小于内容层宽度,如下图所示。

width:100%缩小窗口时背景图片出现空白bug

拖动水平滚动条,出现了bug的样子。右边的背景不存在了。如下图所示。

width:100%缩小窗口时背景图片出现空白bug

问题的根本在于:当窗口缩小时,浏览器默认100%宽度为浏览器窗口的宽度。而忽略了下部内容层固定宽度(960px)。从而出现了固定宽度大于100%宽度的现象。浏览以此理解来解析页面,就出现了容器宽度理解上的差异,出现了一个非常奇特的BUG。如图所示。

width:100%缩小窗口时背景图片出现空白bug

我们分析,问题的解决之道:既然是宽度理解上的差异,只需要告知浏览器页面容器的宽度,头部元素的宽度不能小于内容层的宽度即可。当浏览器窗口缩小时,保持页面容器和头部元素的最小宽度为内容层的宽度。这样就解决了宽度上出现问题。

css代码为:

#wrap {
    width:100%;
    background:#ddd;
    width:expression(document.body.clientWidth <= 960? "960px": "auto");
    min-width:960px;
}
#header {
    width:100%;
    height:78px;
    border-bottom:1px solid #f60;
    background:#f0f0f0 url(head_tbg.jpg) repeat-x;
}
#page {
    width:960px;
    height:100px;
    margin:5px auto;
    background:#fff;
    border:1px solid #00CCCC;
}

html代码为:

<div id="wrap">
    <div id="header"></div>
    <div id="page"></div>
</div>
相关推荐
CSS:清除多余的标签让代码更加有意义
DIV+CSS布局两列右列宽度自适应布局的不同实现方法
CSS排版中常遇到的五个问题及解决办法
CSS网页布局有关中文排版的九个技巧
详解如何用div+css模拟表格对角线
Firefox与IE浏览器在CSS样式表中的差异
加一段代码让IE6支持hover伪类效果
用CSS来控制字符长度和显示长度
CSS代码不同书写风格的优缺点
如何使一个DIV层居中于浏览器中?
正确理解CSS规则的优先级算法
创建高效CSS代码的五个好习惯
最新全面兼容ie6,ie7,ie8,ff的CSS HACK写法
理解CSS的查找匹配原理,打造简洁高效的CSS代码
掌握跨浏览器兼容的CSS代码编写准则
21个令人惊叹的CSS技术(案例)展示
CSS框架到底有那些优点与缺点?
如何使用CSS控制网页打印页面格式?
深入理解CSS的margin属性(外边距)
CSS中30个最常用的选择器,你学会了吗?
CSS进阶:用Margin还是用Padding?
WEB前端开发应该注意的问题8点(原创技巧)
xhtml+css 复杂的视觉效果解决方案与技巧(原创技巧)
CSS新手入门教程:CSS代码编写须注意的八大细节
资深seo利用css样式作弊手法全解
CSS新手教程:30个CSS常见问题的分析及解决方法
10种导致CSS布局页面错乱的解决方法分享
css教程:解决float属性的元素父元素高度不能自适应
CSS教程:清理浮动简洁有效的方式分享
CSS Sprites(CSS精灵)技术及其优化经验分享
IE6下文字或图片神秘消失的原因及解决方法分享
CSS相对定位实现div容器绝对居中的简单方法分享
8种CSS清除浮动的方法优缺点分析
高效CSS开发需要注意的要点以及提升性能的做法
CSS3实现透明边框的方法分享
分析W3C官网超链接交互样式设计与实现方法

精彩推荐

热门教程