用 jQuery 写着一个相册,在测试过程中,发现点击缩略图,弹出大图后,页面会往左偏移一点,关闭大图后又回到原地。
这个现象只在 Chrome 发生,不在 Firefox 发生。于是我很自然地想到,是浏览器默认样式的问题,于是用了个 html5-reset.css。问题解决(至少我以为)。
结果后来又发生了同样的状况,这次我开始查看源代码,发生问题出自于 clientWidth 和 clientHight 这两个属性。
这两个属性其实就是所谓的「视口」(viewpoint),就是浏览器窗口的大小,但是,这是不包括滚动条的。也就是说,在页面下拉生成滚动条后,clientWidth 会变小,在某些情况下会造成麻烦。
解决问题很简单,就是强制一直显示滚动条,那样的话,clientWidth 的值就不会变了。
只需在 CSS 里添加一条 html{min-height: 101%;}。话说页面元素不多,无法铺满整个视口,但想固定 footer 在页面底部时,也可以用这个。