固定位置图像不显示在旧blackberrys上

时间:2014-07-04 13:07:57

标签: html css

我有一张图片(我正在添加到带有javascript的页面)我想在屏幕底部显示(而不是在内容的底部)。

除了较老的黑莓外,一切似乎都能正常工作。知道我哪里错了吗?

在我的HTML中

<div id="sticky" class="banner-sticky" style="position: fixed;">
</div>

在我的CSS中我有

.banner-sticky {
bottom: 0px;
left: 0px;
width: 100%;
text-align: center;
background: rgb(0, 0, 0) transparent;
background: rgba(0, 0, 0, 0);
/*  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";*/
-webkit-backface-visibility:hidden;
}

.advert-img {
width: 90%
height: 100%;
}

@media only screen and (min-width: 320px) {
.advert-img {
width: 90%
}
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 
.advert-img {
width: 90%
}
}

@media only screen and (min-width: 700px) {

.advert-img {
width: 50%
}

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

.advert-img {
width: 50%
}

}

@media only screen and (min-width: 1300px) {

.advert-img {
width: 30%
}

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

.advert-img {
width: 30%
}

}

javascript之后生成的html做了它的事情:

<div style="position: fixed;" class="banner-sticky" id="sticky">
<a href="http://ad.vic-m.co:80/landingpage?pr=21&amp;ar=GoM;ht=245" id="ad-link">
<span id="banner-ad"><img src="http://ad.vic-m.co:8080/AdService/fileHandleAction?file=7A10B19B-2E51-4CCE-AB6A-319C382B4AA8" class="advert-img">
</span>
</a>
</div>

0 个答案:

没有答案