Css Windows Phone IE mobile漏洞,具有透明背景图像和底部绝对定位
我对WP IE有两个问题:Css Windows Phone IE mobile漏洞,具有透明背景图像和底部绝对定位,css,web-applications,windows-phone,ie-mobile,Css,Web Applications,Windows Phone,Ie Mobile,我对WP IE有两个问题: 透明背景图像的透明边框上有瑕疵 页面底部的绝对定位div在浏览器导航栏和页面底部之间留下约5px的白色间隙 注意,我使用div而不是img来处理HDPI设备(iphone4+、iPad3+、androidgalaxys3、wp8lumia920…)。有了img,工件就消失了 HTML: 基于HTML5样板文件的简单示例页面(即包括用于规范化/重置的CSS): 对于没有Windows Phone的用户,以下是WP7.5上的结果捕获: 确定,因此可以使用以下方法解决
- 透明背景图像的透明边框上有瑕疵
- 页面底部的绝对定位div在浏览器导航栏和页面底部之间留下约5px的白色间隙
确定,因此可以使用以下方法解决图像瑕疵: 背景重复:无重复
仍然在看白色的间隙,似乎是身体的缺陷,因为某种原因我无法理解。关于白色边框-看起来您的
或
标签应用了边距或填充设置。如果这些标记中的任何一个也有定位,例如position:relative
-您可以很容易地看到这种行为
原因是position:absolute
实际上总是相对于最近定位的父对象。有关这方面的更多信息,请查看
如果这就是问题所在-您可以尝试以下潜在的修复方法:
html, body { margin: 0; padding: 0; }
这将去除页面边缘周围的间距,并有望使您的内容与浏览器边缘齐平。使用position:absolute with bottom:0时,我对底部的白色间隙也有同样的问题。你找到解决办法了吗?
.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');
}
}
html, body { margin: 0; padding: 0; }