我有一张图片(我正在添加到带有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&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>