解决iPad(Safari)下背景图片空白或被截断的问题

我做的一个页面中,顶部是一条100%宽的背景,CSS样式如下:

#header {
width:100%;
height: 94px;
background: url(/images/headerbg.gif);
overflow: hidden;
}

发现在iPad下右侧有些部分显示不出来,所以开始调试。
装了Windows版本的Safari测试页面后发现,初始化一个窗体宽度,然后加载页面,等到页面加载完成后再拉动水平滚动条,就会发现顶部右边的背景全变成了白色。
这个明显是Safari对背景的渲染有问题,背景的100%宽度在初始化页面时就被自动转化成固定的宽度值了,因此之后拉动滚动条,不会重新渲染。

StackOverflow上面提供了几种解决方案:
http://stackoverflow.com/questions/2966803/a-way-to-correct-background-scaling-in-ipads-safari

为了简便,我目前采取了最简单的方案,即在 body 中加入 min-width 定义:

body {
line-height: 1;
min-width:1024px;
}

— EOF —

IE7 下 IFRAME 滚动条无法滚动的 BUG

要让 IFRAME 隐藏滚动条,通常的做法就是在嵌入  IFRAME 的页面的 CSS 中指定以下规则:

html, body {overflow: hidden}

如果只是想隐藏横向滚动条,则使用以下代码:

html, body {overflow-x: hidden}

以上代码在 IE、Firefox、Opera、Chrome 下均能正常工作。但是我发现在 IE7 下隐藏横向滚动条时,虽然有显示纵向滚动条,但鼠标滚轮无法使用。似乎 IE7 把 overflow-y 也当成了 hidden。

碰到这种情况,显式指定一下 overflow-y 即可,如:

html, body {overflow-x: hidden; overflow-y: auto;}

或者:

html, body {overflow: auto; overflow-x: hidden;}

— EOF —