2013-01-09 23 views
3

我有2個問題WP IE:與透明背景圖像和底部的絕對positionning的Windows Phone IE移動竊聽

  • 透明背景圖像有文物上的透明邊框
  • 絕對定位的div的底部頁面離開瀏覽器導航欄和頁面底部

請注意,我用的,而不是IMG的div來處理CSS retina image replacement爲華電國際設備(iPhone 4+,iPad3的+,Android的銀河S3之間的〜5px的白色差距,WP8 L Umia 920 ...)。有了img,工件就消失了。

HTML:

<div class="header-left"></div> 
    <div class="footer-left"></div> 

CSS: http://file.rspreprod.fr/wp-ie-bugs/index.html

對於那些沒有Windows系統:基於HTML5樣板(即包括正常化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/[email protected]'); 
    } 

    .footer-left{ 
     background-image: url('../assets/[email protected]'); 
    } 
} 

簡單示例頁面電話,這裏是WP7.5上的結果捕獲:

capture

+0

我使用位置時底部的白色間隙存在相同的問題:絕對底部爲0.您是否找到修復方法? – efdee

回答

0

好吧,可以使用以下方法解決圖像僞影: background-repeat:no-repeat;

仍然看着白色的差距,似乎是由於某些原因,我無法確定身體的過錯。

0

至於白色邊框 - 它看起來或者您的<body><html>標籤具有施加marginpadding設置。如果其中任何一個標籤也有定位,例如position: relative - 您可以輕鬆看到此行爲。

其原因是position: absolute總是實際相對到位於父最近。欲瞭解更多信息,請查看this fantastic article

如果是這樣,其實,這個問題 - 你可以嘗試以下可能的解決方法:

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

這會從周圍的頁面的封邊條的間距,並希望與邊緣帶上您的內容平齊瀏覽器。