8250 BlackBerry 장치에서 CSS 끈끈한 바닥 글이 작동하지 않습니다.

페이지 하단에 붙어있는 모바일 사이트에서 바닥 글을 사용하고 싶었습니다. CSS Sticky Footer example by Ryan Fait을 찾아 구현했습니다. 필자가 테스트 할 수있는 모든 브라우저에서 바닥 글이 바닥에 잘 붙어있는 것을 발견했습니다.8250 BlackBerry 장치에서 CSS 끈끈한 바닥 글이 작동하지 않습니다.

그런 다음 문제가 발생했습니다. 고객들은 바닥 전체에 던지는 것에 대해 불평했다. 고통스럽게 세부 사항을 요청하면 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 Sticky Footer 해킹으로 장난을 치는 작은 업데이트입니다. 언급 된 BlackBerry 장치에서도 작동하지 않았습니다.

출처

2010-12-11 ayaz

'float'ing이 없으므로'clear : both;'는 필요 없습니다. 나는 왜 당신이'position : relative,'를 사용하는지 이해하지 못한다. – Shikiryu

두 가지 다른 시도를 한 후에 나는 CSSStickyFooter 솔루션을 발견했습니다. 나는 그것을 구현했고 문제의 블랙 베리 장치와 내가 테스트 해본 나머지 모든 것들과 잘 작동하는 것을 발견했다. 아래에 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

8250 BlackBerry 장치에서 CSS 끈끈한 바닥 글이 작동하지 않습니다.

답변

관련 문제