css 背景图 左右空白,缩小窗口时CSS背景图出现右侧空白BUG的解决方法
缩小窗口时CSS背景图出现右侧空白BUG的解决方法
摘自http://www.5icool.org/a/201305/a1868.html
页面容器(#wrap)与页面头部(#header
)为100%宽度。而内容的容器(#page)为固定宽度960px。浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异。如下图所示窗口宽度大于内容层宽度：
改变浏览器窗口的大小，小于内容层宽度，如下图所示。
拖动水平滚动条，出现了bug的样子。右边的背景不存在了。如下图所示。
问题的根本在于：当窗口缩小时，浏览器默认100%宽度为浏览器窗口的宽度。而忽略了下部内容层固定宽度(960px)。从而出现了固定宽度大于100%宽度的现象。浏览以此理解来解析页面，就出现了容器宽度理解上的差异，出现了一个非常奇特的BUG。如图所示。
我们分析，问题的解决之道：既然是宽度理解上的差异，只需要告知浏览器页面容器的宽度，头部元素的宽度不能小于内容层的宽度即可。当浏览器窗口缩小时，保持页面容器和头部元素的最小宽度为内容层的宽度。这样就解决了宽度上出现问题。
html代码为：
css 背景图 左右空白,缩小窗口时CSS背景图出现右侧空白BUG的解决方法相关推荐
- CSS缩小窗口时，背景图出现右侧空白
缩小窗口时CSS背景图出现右侧空白BUG的解决方法(兼容各浏览器) 解决办法: 在css内加入如下两行代码,让它自己判断: width:expression(document.body.clientW ...
- html 图片右侧空白,CSS缩小窗口时，背景图出现右侧空白
CSS让背景平铺的代码 repeat-x ,也就是沿着X方向重复下去(横向平铺): repeat-y (纵向平铺){ background-p_w_picpath: url 关于宽度自适应,已经是前段 ...
- 缩小窗口时CSS背景图出现右侧空白BUG的解决方法
页面容器(#wrap)与页面头部(#header )为100%宽度.而内容的容器(#page)为固定宽度960px.浏览窗口缩小而小于内容层宽度时会产生宽度理解上的差异.如下图所示窗口宽度大于内容层宽 ...
- [css] 写出你遇到过IE6/7/8/9的BUG及解决方法
[css] 写出你遇到过IE6/7/8/9的BUG及解决方法 把以前兼容IE6.7学习的东西搬出来了,还以为不见了.兼容性问题 1.IE6margin双边距问题 2.IE67 li间隙问题 3.图片间 ...
- Ubuntu16.06 单Nvidia显卡 深度学习运行时 界面卡顿（刷新慢）的解决方法
关于Ubuntu单Nvidia显卡 深度学习运行时 界面卡顿(刷新慢)的解决方法 背景 我在按照 本链接 的第二种方法安装后,成功安装cuda 10.0与cudnn之后,在深度学习训练过程中发现了严重 ...
- 打开任意窗口之后，电脑下方任务栏无法显示，解决方法：
打开任意窗口之后,电脑下方任务栏无法显示,解决方法: 打开窗口之后在电脑下方任务栏显示不出来?怎么解决呢?下面就给大家讲解方法 鼠标右键点击下方的任务栏,如图所示,选择属性 然后弹出如图所示的窗口 然 ...
- php mssql_result 255 string,PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
本文实例讲述了PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法.分享给大家供大家参考.具体分析如下: PHP 连接 MSSQL 的新手经常遇到这个问题:数据库里面的 nvarch ...
- 在Openstack上部署compute节点上时，开启服务openstack-nova-compute.service无法启动的解决方法
在Openstack上部署compute节点上时,开启服务openstack-nova-compute.service无法启动的解决方法 参考文章: (1)在Openstack上部署compute节点 ...
- Idea运行web项目时,提示java.lang.ClassNotFoundException: com.mysql.jdbc.Driver解决方法
Idea运行web项目时,提示java.lang.ClassNotFoundException: com.mysql.jdbc.Driver解决方法 参考文章: (1)Idea运行web项目时,提示j ...
- Android 软键盘弹出时把布局顶上去，控件乱套解决方法
Android 软键盘弹出时把布局顶上去,控件乱套解决方法 参考文章: (1)Android 软键盘弹出时把布局顶上去,控件乱套解决方法 (2)https://www.cnblogs.com/zhuj ...
最新文章
- HashMap和Hashtable的区别总结
- 链路层的封装方式与IP选路 （二）
- hdu 2461(线段树求面积并)
- 七牛云智能日志管理平台正式发布
- 使用function module CRM_BUPA_FRG0010_GET_VALIDLIST 获得某个account assign的sales area
- linux查看通信延迟,低优先级进程延迟实时进程中的串行通信(Linux)
- python中在同一个位置输出数据
- 编程范式 —— 函数式编程入门
- thinkphp事务处理以及无效时的解决方案（整理）
- 【IT】计算机基础知识
- bochs上网镜像怎么上网_【bochs win10镜像可上网版】bochs win10镜像img下载 完整版-趣致软件园...
- Reset 重置按钮
- c语言有坐标判断正方形,正方形
- 兴业银行java面试_【面经】兴业银行信息技术岗面试
- 个人资源小仓库之【工具】！
- 动态路由协议RIP的深层配置学习
- 大学“电路分析基础”试题合集第四章
- 计算机三级网络技术路由配置,计算机三级网络技术（7）:路由器配置及使用（上）...
- 本地调试支付回调内网穿透工具
- 尚硅谷大数据开发Day04