Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/extjs/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css Windows Phone IE mobile漏洞,具有透明背景图像和底部绝对定位_Css_Web Applications_Windows Phone_Ie Mobile - Fatal编程技术网

Css Windows Phone IE mobile漏洞,具有透明背景图像和底部绝对定位

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上的结果捕获: 确定,因此可以使用以下方法解决

我对WP IE有两个问题:

  • 透明背景图像的透明边框上有瑕疵
  • 页面底部的绝对定位div在浏览器导航栏和页面底部之间留下约5px的白色间隙
注意,我使用div而不是img来处理HDPI设备(iphone4+、iPad3+、androidgalaxys3、wp8lumia920…)。有了img,工件就消失了

HTML:

基于HTML5样板文件的简单示例页面(即包括用于规范化/重置的CSS):

对于没有Windows Phone的用户,以下是WP7.5上的结果捕获:


确定,因此可以使用以下方法解决图像瑕疵: 背景重复:无重复


仍然在看白色的间隙,似乎是身体的缺陷,因为某种原因我无法理解。

关于白色边框-看起来您的
标签应用了
边距
填充
设置。如果这些标记中的任何一个也有定位,例如
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; }