联系我们
联系我们

CSS里width设置100%在缩小窗口时候内容被截断或显示不全

发布于:2015-09-08 09:53来源:www.yxlcom.com 作者:亿讯联 点击:

CSS里width设置100%在缩小窗口或者小尺寸的屏幕时候内容被截断或显示不全
 

故障现象:

当我们在写代码的时候如果,页面头部(#header )样式定义使用了100%宽度,那么当我们把浏览器窗口缩小的时候就会发现有部分内容被截断或显示不全;

 

原因分析:

当窗口缩小时,浏览器默认100%宽度为浏览器窗口的宽度。而忽略了下部内容层固定宽度(比如你设置的网页整体宽度为960px)。从而出现了固定宽度大于100%宽度的现象。浏览以此理解来解析页面,就出现了容器宽度理解上的差异,出现了一个非常奇特的BUG;

 

解决办法:

只需要使用css的min-width:980px对width:100%的对象加以限制即可以解决;

 

扩展延伸:

如果在做自适应网页或测试网页在不同设备下的兼容性测试时候,比如 iPad 的 Safari 浏览器中背景显示不全,等问题,都可以尝试定位到该 div 后,即很有可能发现是指定 css 的宽度为 100%导致问题;safari 中 viewport 默认宽度为 980px,若事先未指定其初始 viewport 宽度,则会默认按照 980px 处理。可以默认初始化viewport宽度或在 css 中设定 min-width即可解决;

------分隔线----------------------------
------分隔线----------------------------