Windows Phone IE mobile bugs with transparent background-image and bottom absolute positionning

问题

I have 2 problems with WP IE :

transparent background-image have artifacts on their transparent borders
absolute positioned divs to the bottom of the page leaves a ~5px white gap between the browser navigation bar and the bottom of the page

Note that I use divs instead of img to handle CSS retina image replacement for HDPI devices (iPhone 4+, iPad3+, Android Galaxy S3, WP8 Lumia 920...). With img, the artifacts are gone.

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');
    }
}

Simple sample page based on HTML5 boilerplate (i.e. includes a CSS for normalisation/reset) : http://file.rspreprod.fr/wp-ie-bugs/index.html

For those without Windows Phone, here is a capture of the result on WP7.5 :

回答1:

Ok so the image artifacts can be solved using : background-repeat:no-repeat;

Still looking at the white gap, seems to be the body's fault for some reason I can't figure.

回答2:

With regards to the white border - it looks like either your <body> or <html> tag has a margin or padding setting applied. If either of those tags also has positioning, such as position: relative - you can easily see this behavior.

The reason is that position: absolute is always actually relative to the nearest positioned parent. For more information on that, check out this fantastic article.

If that is, in fact, the problem - you can try the following potential fix:

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

This will strip the spacing from around the page's edge, and hopefully bring your content flush with the edges of the browser.

来源：https://stackoverflow.com/questions/14232372/windows-phone-ie-mobile-bugs-with-transparent-background-image-and-bottom-absolu

标签

css

web-applications

windows-phone

ie-mobile