html - 图像的背景位置在 iPad 3 中无法正常工作

Question

您好，请帮助某人解决问题。问题是页眉背景图像在 ipad3 中显示不正确。我的 css 和 html 代码在下面。这在所有桌面浏览器中都可以正常工作。但是 .headerhead 背景图片在 ipad3 浏览器中是隐藏的。

fiddle 链接 http://jsfiddle.net/jvandhana/CL6Ru/

 <div id="header">
    <div class="headerhead">
        <div class="headerdetail">
            My Task
        </div>
    </div>
</div>

#header {
    background: url("../images/bgheadgrey.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    color: #FFFFFF;
}
.headerhead {
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin: 0 auto;
    width: 50%;
    background: url("../images/bgtitle_large1.png") no-repeat scroll center 0 rgba(0, 0, 0, 0);
    font-size: 2em;
}

ipad3 的媒体查询/*iPad 3 & 4 媒体查询 */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    #header {
        position: relative;
        z-index: 0;
    }
    .headerhead {
        height: 60px;
        width: 600px;
        position: relative;
        z-index: 999;
    }

}

Answer 1

在 iPad 3 的媒体查询中，.headerhead 缺少背景图像，您必须将背景图像也放在这里。