Question

WP IE有2个问题：

透明背景图片在其透明边框上有文物
页面底部的绝对定位div会在浏览器导航栏和页面底部之间留下~5px的白色空白

请注意，对于HDPI设备（iPhone 4 +，iPad3 +，Android Galaxy S3，WP8 Lumia 920 ......），我使用div而不是img来处理CSS retina image replacement。使用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的结果的捕获：

capture

Answer 1

好的，所以可以使用以下方法解决图像伪像：背景重复：不重复;

仍然看着白色的差距，似乎是身体的错，因为我无法想象。

Answer 2

关于白色边框 - 看起来，就像您的<body>或<html>标记应用margin或padding设置一样。如果其中任何一个标签也有定位，例如position: relative - 您可以轻松看到此行为。

原因是position: absolute实际上总是相对到最近的定位的父。有关详细信息，请查看this fantastic article。

如果是，事实上，问题是 - 你可以尝试以下潜在的解决方法：

html, body { margin: 0; padding: 0; }

这将剥离页面边缘周围的间距，并希望将您的内容与浏览器的边缘齐平。

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

2 个答案: