CSS粘页脚无法在8250 BlackBerry设备上工作

我希望在我正在努力坚持页面底部的移动网站上使用页脚。我找到了CSS Sticky Footer example by Ryan Fait并实现了它。在我可以想像的每个浏览器上测试，我发现页脚很好地贴在底部。CSS粘页脚无法在8250 BlackBerry设备上工作

然后，它发生了。客户抱怨脚注到处都是。在痛苦地请求详细信息时，我发现问题只发生在一款黑莓移动设备上：8250型号。我拿出一台Windows VM，下载并安装了BlackBerry 8250模拟器，果然，我看到了问题。

对于页面高度为两个BlackBerry屏幕，页脚粘贴到第一个屏幕的中间位置，在其他位置。滚动时页脚不会移动，并且如果向下滚动到页面的下半部分，则页脚不可见。它保持固定在顶部屏幕的中间位置。

我会发布HTML和CSS到这个问题的结尾。如果我能得到任何关于8250黑莓手机为什么会出现这种情况的线索或线索，并且特别是如何解决问题，我将非常感激。

谢谢！

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
     <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;"/> 
     <style type="text/css"> 
      * { margin: 0; padding: 0; } 
      html { height: 100%; } 
      body { height: 100%; } 
      .page { 
       width: 100%; 
       min-height: 100%; 
       height: auto !important; 
       height: 100%; 
       margin: 0 auto -4em; 
      } 
      .push { 
       height: 4em; 
      } 
      #footer { 
       clear: both; 
       position: relative; 
       z-index: 10; 
       height: 4em; 
       margin-top: -4em; 
       text-align: center; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="page"> 
      <!-- lots of other DIVs here for actual content --> 
      <div class="push"></div> 
     </div> 
     <div id="footer"> 
      <!-- footer content over here --> 
     </div> 
    </body> 
</html>

我发现这个jQuery Sticky Footer黑客。我不太确定这是否会成为人们建议我应该遵循的事情。不过，我还没有测试过它。

更新：这是一个小小的更新，说我玩jQuery粘性页脚hack链接正确的上面。它也不适用于所提及的BlackBerry设备。

来源

2010-12-11 ayaz

没有必要'clear：both;'因为您没有任何'浮动'。我不明白你为什么在这里使用'position：relative;'也是。 – Shikiryu 2010-12-14 12:07:53

在尝试了几件不同的事情之后，我偶然发现了CSSStickyFooter解决方案。我实现了它，并发现它可以在Black Berry设备上正常工作，以及我已经测试过的其他所有东西。我将粘贴下面的HTML和CSS代码：

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
     <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;"/> 
     <title>Another CSS Sticky Footer that works on Black Berry</title> 
     <style type="text/css"> 
      * { 
       margin: 0; 
       padding: 0; 
      } 

      html { 
       height: 100%; 
      } 

      body { 
       height: 100%; 
      } 

      .page { 
       width: 100%; 
       min-height: 100%; 
      } 

      .push { 
       padding-bottom: 4em; 
       overflow: auto; 
      } 

      #footer { 
       position: relative; 
       margin-top: -4em; 
       height: 4em; 
       clear: both; 

       background-color: red; 
      } 
     </style> 
    </head> 

    <body> 
     <div class="page"> 
      <div id="content"> 
       <p>Some body content will come here</p> 
       <p>And over here as well.</p> 
      </div> 
      <div class="push"></div> 
     </div> 
     <div id="footer"> 
      <p>This is the footer block.</p> 
     </div> 
    </body> 
</html>

来源

2010-12-14 17:54:08 ayaz

CSS粘页脚无法在8250 BlackBerry设备上工作

回答

相关问题