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

【问题标题】：Windows Phone IE mobile bugs with transparent background-image and bottom absolute positionning具有透明背景图像和底部绝对定位的 Windows Phone EE 移动错误
【发布时间】：2012-12-23 07:58:25
【问题描述】：

WP IE 有 2 个问题：

透明背景图像的透明边框上有伪影
绝对定位到页面底部的 div 在浏览器导航栏和页面底部之间留下了约 5 像素的白色间隙

请注意，对于 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 上的结果截图：

【问题讨论】：

在使用 position: absolute with bottom: 0 时，我遇到了与底部白色间隙相同的问题。您找到解决方法了吗？

标签： css web-applications windows-phone ie-mobile

【解决方案1】：

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

还是看着那白色的缝隙，好像是身体的问题，不知为何我想不通。

【讨论】：

【解决方案2】：

关于白色边框 - 它看起来像您的 <body> 或 <html> 标记应用了 margin 或 padding 设置。如果这些标签中的任何一个也有定位，例如position: relative - 你可以很容易地看到这种行为。

原因是position: absolute 实际上总是相对到最近的定位的父级。有关这方面的更多信息，请查看this fantastic article。

如果这确实是问题所在 - 您可以尝试以下可能的解决方法：

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

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

【讨论】：