Question

我一直在研究一个粘性的页眉/页脚＆amp;中心内容组合一个星期左右，我想我95％那里。我整理过的网站都适用于我尝试过的所有浏览器/设备，但是当我在自己的HTC Motzart上测试它时会出现问题。

（HTC Motzart在页面底部显示了额外的填充（大约15px），没有明显的原因）。

虽然我不是太关于它不能在这个特定的设备上工作（考虑到它相当陈旧和过时），但它让我想知道代码中是否存在需要修复的错误。如果这里有任何明显的错误，或者只是一个很旧的设备错误地呈现网站，任何人都可以告诉我吗？

感谢您的反馈。

很抱歉，我认为现场网站就我的css而言就足够了......这是（：

的index.html

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <meta charset="utf-8">
      <title></title>
      <meta content="" name="description">
      <meta content="width=device-width" name="viewport">
      <link href="index_files/css.css" rel="stylesheet" type="text/css">
      <script src="index_files/js.js"></script>
      <script src="index_files/jquery.js" type="text/javascript"></script>
      <!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css"><![endif]-->
   </head>
   <body>
      <div class="no-js" id="wrapper">
         <header class="row" id="header">
            <div class="cell">
               <div id="branding">
                  <p><a href="#">Link</a></p>
               </div>
               <div id="contact">
                  <a href="#">Link</a>
               </div>
            </div>
         </header>
         <section class="row" id="middle-row">
            <div class="cell" id="middle-cell">
               <div id="main-content">
                  <h1>H1</h1>
                  <h2>H2</h2>
                  <a href="#">Link</a>
               </div>
               <div id="push"></div>
            </div>
         </section>
      </div>
      <footer class="row-footer" id="footer">
         <div class="cell-footer">
            <div id="legal">
               <p>text</p>
            </div>
            <div id="copyright">
               <ul>
                  <li><a href="#">link</a></li>
                  <li><a href="#">link</a></li>
               </ul>
            </div> 
         </div>
      </footer>
   </body>
</html>

css.css

/* RESETS */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}ul,li{display:inline}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/* FRAMEWORK */
html {overflow:auto; font-family:Arial,Helvetica,sans-serif; font-size:12px}
html, body {height:100%; height:99.99999%}
#wrapper {display:table; height:100%; min-height:100%; width:100%; border-collapse:collapse; margin-bottom:-37px}
#wrapper > .row {display:table-row}
#wrapper > .row > .cell {display:table-cell}
#middle-row {height:100%}
#middle-cell {vertical-align:middle; text-align:center}
#main-content {display:inline-block}
#footer,#header,#push {height:37px; position:relative}

/* LAYOUT */
#branding {position:absolute; margin:8px 0 0 8px; top:0px; left:0px}
#contact {position:absolute; margin:8px 8px 0 0; top:0px; right:0px}
#legal {position:absolute; margin:0 0 8px 8px; bottom:0px; left:0px}
#copyright {position:absolute; margin:0 8px 8px 0; bottom:0px; right:0px}

/* TYPOGRAPHY */
h1 {font-size:47px}
h2 {font-size:20px}
a {outline:0 none; text-decoration:none}
p {font-size:12px}

/* MEDIA QUERIES */
@media screen and (-webkit-min-device-pixel-ratio:0) {html, body {height:100%}.cell-footer {height: 19px}} 

/* TEMPORARY */
#footer,#header{background:grey}

ie7.css

#wrapper.no-js {height: auto}

js.js

jQuery(document).ready(function(){$('.no-js').removeClass('no-js');if($.browser.msie&&$.browser.version<=7){$("#main-content").wrap('<table style="height:100%;width:100%;">'+'<tbody id="tbody-wrapper">'+'<tr>'+'<td valign="middle" align="center"></td>'+'</tr>'+'</tbody>'+'</table>');$('#push').css('position','relative').css('margin-top','-4px');$('#footer').prependTo('#push');$('html').css('margin-bottom',($('#footer').height()+$('#header').height())+'px')}});

浏览器＆amp;设备

IEMobile / 9.0

HTC Motzart / Windows Phone OS 7.5

截图

Screenshot

这是一个模拟粉红色的填充问题，以帮助使它更清晰。

此外，重要的是要提到这只发生在HTC Motzart是肖像时。在景观中，网站可以正常工作。

Sticky Footer / Header＆amp; HTC Mozart中的内容填充问题

0 个答案: