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

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



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



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



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



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

css代码为:
#wrap {
width:100%;
background:#ddd;
width:expression_r(document.body.clientWidth <= 960? "960px":"auto");
min-width:960px;
width:100%缩小窗口时背景图片出现空白bug
}
#header {
width:100%;
height:78px;
border-bottom:1px solid #f60;
background:#f0f0f0 url(head_tbg.jpg) repeat-x;
}
#page {
width:960px;
height:100px;
margin:5pxauto;
background:#fff;
border:1pxsolid #00CCCC;
}

html代码为:




  

爱华网本文地址 » http://www.aihuau.com/a/25101011/92903.html

更多阅读

怎样为PPT插入背景图片 怎样给ppt加背景图片

在我们制作PPT时,简单的插入图片,然后调整一下这是相当不专业也不美观的,我们看到的精美的PPT,基本都是插入的背景哦怎样为PPT插入背景图片——工具/原料PPT怎样为PPT插入背景图片——步骤/方法怎样为PPT插入背景图片 1、首先打开PPT文

qq空间怎么设置背景图片 手机qq全屏背景自定义

qq空间怎么设置背景图片——简介QQ空间还可以设置背景图片哦,使用自己喜欢的背景图片,是不是让我们自己的QQ空间看起来更加绚丽呢?哈哈,那么我们就来尝试使用这个功能喽,为了让我们的空间别具一格,好了,大家速来围观我的经验啦。qq空间怎

qq聊天背景怎么换 精 qq聊天背景图片

qq聊天背景怎么换 精——简介QQ背景可以设置自己喜欢的背景皮肤,也可以自定义皮肤。但是在使用QQ聊天的时候,聊天窗口的背景会是白色的。怎样才设置QQ聊天的背景呢?在下面的经验里冰冰就以QQ2013为例介绍一下QQ聊天背景的设置方法。

怎么设置word背景图片 word如何设置背景

怎么设置word背景图片——简介我们在编辑word文档的时候,为了使自己的文档阅读起来的时候更加的赏心悦目,我们想给word设置一个背景,让文档看起来不那么的单调,那么我们该怎么操作呢?怎么设置word背景图片——工具/原料word2007怎么设

聊天室背景图片大观 聊天室背景图

  所有的背景图片,大小均为1024*768。打开下面的背景图片以后,再打开图片下面的“点击查看原图”就能下载原大小的图片。后面,有一些生日、圣诞节、新年、春节、情人节、教师节、母亲节等图片。

声明:《width:100%缩小窗口时背景图片出现空白bug》为网友高饮一壶分享!如侵犯到您的合法权益请联系我们删除