问题描述:
当浏览器缩小后,出现滚动条,拉至右边,显示出来的部分为空白.
原因:
通过控制台的查看,可得知,由于固定了子元素的宽度,当浏览器窗口缩小后,将导致子元素宽度大于父元素的宽度,子元素将父元素撑开所致,如图:
解决方案:
第一种:在父元素上添加样式:
style="width:expression(document.body.clientWidth <= 1200? '1200px': 'auto');min-width:1200px"
由于IE6不支持min、max,为了兼容,故使用width:expression1(document.body.clientWidth <= 1200? ‘1200px’: ‘auto’);
第二种:修改子元素样式的固定宽度,将width: 1170px;改为max-width: 1170px;
第三种:相应式布局,随着浏览器宽度的变化,调整子元素宽度和布局,避免撑开父元素宽度的情况出现。
expression将CSS属性和Javascript脚本关联起来,是动态设置CSS属性的强大方法。但expression对浏览器的资源要求高(因为它的计算频率高)。在性能优化方面,可以将第一次计算出的结果赋值给指定的样式属性,并用这个属性代替expression。但仍存在很多问题,所以尽量不使用。 ↩︎