Question

我正在尝试显示固定在屏幕底部的图像广告（而不是文本的底部）。

不确定这是否有帮助，但可以在example page

找到示例页面

一切都适用于台式机和最新款手机。它不适用于一些较旧的移动式布鲁塞尔。有任何想法吗？我已经好几天了。它曾经工作但我最近必须改变一些东西。

如果我将图像放在html中文本的底部，它适用于所有浏览器。

在javascript文件中我有

getBannerHtml: function() {
return '<a id="ad-link" href="http://foo.co:80//landingpage?pr=21&amp;wd=440&amp;ht=245"><span id="banner-ad"><img class="advert-img" src="http://foo.co:8080/AdService/fileHandleAction?file=7A10B19B-2E51-4CCE-AB6A-319C382B4AA8" /></a>'
}

我有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%
  }
}

在html中我有

<!DOCTYPE html>
 <html>
  <head>
   <link rel="stylesheet" type="text/css" href="vicinity.css">
   <script type="text/javascript" src="./jquery.min.js"></script>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
   <div id="sticky" class="banner-sticky" style="position: fixed;">
   </div>
   <script type="text/javascript">
     new Vicinity (pubReference, sessionId, function(result) {
       $(function() {
         $("#sticky").html(result.ad.getBannerHtml());
       })
     }, function(result) {
         $("#sticky").html(result.ad.getBannerHtml());
         $(function() {
         displayResults(result);
         })
      });
 </script>
 </body>
</html>

Answer 1

许多旧浏览器没有很好的标准来支持css提供的所有内容，即使现代浏览器缺少某些功能。假设您使用的是Opera或Opera mini，则必须检查浏览器的兼容性。 MINI是现代发展中最差的。它缺乏所有这些良好的标准。你必须知道即使是现代的移动IE浏览器（Windows Phone 8）也不支持固定位置。

检查此引用：

Browser Support

Article

固定图像不在旧版移动浏览器上呈现，例黑莓

1 个答案: