css - 具有透明背景图像和底部绝对定位的 Windows Phone IE 移动错误

Question

我在使用 WP IE 时遇到了 2 个问题:

• 透明背景图像在其透明边框上有伪影
• 绝对定位的 div 到页面底部，在浏览器导航栏和页面底部之间留出 ~5px 的白色间隙

请注意，我使用 divs 而不是 img 来处理 CSS retina image replacement适用于 HDPI 设备(iPhone 4+、iPad3+、Android Galaxy S3、WP8 Lumia 920...)。使用 img，工件消失了。

HTML:

    <div class="header-left"></div>
    <div class="footer-left"></div> 

CSS:

.header-left {
    position: absolute;
    top:0;
    left:0;
    background-image: url('../img/bkg_header_left.png');    
    background-size: 92px 79px; 
    width: 92px;
    height: 79px;       
}

.footer-left{
    position:absolute;  
    bottom:0;
    left:0;
    background-image: url('../img/bkg_footer_left.png');
    background-size: 315px 50px;
    width:315px;
    height:50px;    
}


/*  DPI specific CSS
 *  retina image replacement */ 
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
    only screen and (-moz-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min-device-pixel-ratio: 1.5) {

    .header-left {
        background-image: url('../assets/bkg_header_left@2x.png');
    }

    .footer-left{
        background-image: url('../assets/bkg_footer_left@2x.png');
    }
}

基于 HTML5 样板的简单示例页面(即包含用于规范化/重置的 CSS): http://file.rspreprod.fr/wp-ie-bugs/index.html

对于没有 Windows Phone 的用户，这里是 WP7.5 上的结果截图:

Answer 1

好的，图像伪影可以使用以下方法解决:背景重复:不重复；

还是看着白色的缝隙，不知为何我想不通，似乎是 body 的问题。