Windows Phone IE移动错误与透明背景图像和底部绝对定位 [英] Windows Phone IE mobile bugs with transparent background-image and bottom absolute positionning
问题描述
我有两个WP IE的问题：
- 透明背景图片在其透明边框上有工件
- 绝对定位div到页面底部在浏览器导航栏和页面底部之间留出〜5px的白色空白
请注意，我使用divs而不是img来处理。 p>
如果是这样，事实上，问题 - 你可以尝试以下潜在的修复：
html，body {margin：0; padding：0; }
这将剥离页面边缘周围的空白，希望能让您的内容与边缘齐平的浏览器。
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 :
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.
这篇关于Windows Phone IE移动错误与透明背景图像和底部绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
