3

我对 WP IE 有 2 个问题：

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

请注意，我使用 div 而不是 img 来处理HDPI 设备（iPhone 4+、iPad3+、Android Galaxy S3、WP8 Lumia 920...）的CSS Retina 图像替换。使用 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 上的结果截图：

捕获

4

2 回答 2

0

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

原因是它position: absolute实际上总是相对于最近的定位 parent。有关这方面的更多信息，请查看这篇精彩的文章。

如果这实际上是问题所在 - 您可以尝试以下潜在修复：

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

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

于 2013-04-23T17:39:22.763 回答
0

好的，因此可以使用以下方法解决图像伪影： background-repeat:no-repeat;

依旧看着那白色的缝隙，不知为何是身体的错，我想不通。

于 2013-01-09T16:07:09.863 回答