3

WP IE には 2 つの問題があります。

  • 透明な背景画像には、透明な境界線にアーティファクトがあります
  • ページの下部に div を絶対配置すると、ブラウザーのナビゲーション バーとページの下部の間に ~5px の白い隙間ができます。

HDPI デバイス (iPhone 4+、iPad3+、Android Galaxy S3、WP8 Lumia 920...) のCSS Retina イメージ置換を処理するために、img の代わりに div を使用していることに注意してください。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

さて、画像のアーティファクトは：background-repeat：no-repeat;を使用して解決できます。

まだ白い隙間を見ていると、どういうわけか体のせいなのかわからないようです。

于 2013-01-09T16:07:09.863 に答える
0

白い枠線については、orタグにor設定が適用されているようです。これらのタグのいずれかに - などの配置もある場合、この動作を簡単に確認できます。<body><html>marginpaddingposition: relative

その理由は、position: absolute実際には常に最も近くに配置された親に対して相対的だからです。詳細については、このすばらしい記事をご覧ください。

それが実際に問題である場合は、次の潜在的な修正を試すことができます。

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

これにより、ページの端からスペースが取り除かれ、コンテンツがブラウザーの端と同じ高さになることが期待されます。

于 2013-04-23T17:39:22.763 に答える