我对jQM的页脚有疑问。这是演示jsfiddle：http://jsfiddle.net/lesliez/SenTt/1/
仔细查看页脚不见了，在页面转换前后都再次出现。在台式机浏览器上不是很明显，但是在移动设备上却很明显（延迟时间更长）。
有人请告诉我我做错了什么。谢谢。
我的HTML：
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
body { background-color:white; color:black }
</style>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<script src='intelxdk.js'></script>
<script type="text/javascript">
/* Intel native bridge is available */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
</head>
<body>
<!-- content goes here-->
<!-- Start of first page -->
<div data-role="page" id="foo">
<div data-role="header" data-position="fixed">
<h1>Foo</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#bar" data-transition="slide">bar</a></p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header" data-position="fixed">
<h1>Bar</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
<p><a href="#foo" data-transition="slide" data-direction="reverse">Back to foo</a></p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<script src='js/jquery-1.11.1.min.js'></script>
<script src='js/jquery.mobile-1.4.2.min.js'></script>
</body>
</html>
我的CSS：
.ui-content {
padding: 0;
position: absolute !important;
top : 40px !important;
right : 0;
bottom : 40px !important;
left : 0 !important;
background:url(http://htc-wallpaper.com/wp-content/uploads/2013/11/bulldog-puppy1.jpg);
background-size:cover;
background-repeat:no-repeat;
}
最佳答案
我在1.4.2中也遇到了类似的问题，花了我们很少的精力找到了一个好的解决方案。在工作时，我注意到JQM向页面容器添加了最小高度和高度内联样式，因此这似乎是问题所在。
好吧，首先，我将JQM html包装到div元素中，并将其设置为JQM页面容器：
JS代码：
<script type="text/javascript">
$(document).one("mobileinit", function () {
// Setting #container div as a jqm pageContainer
$.mobile.pageContainer = $('#main');
// Setting default page transition to slide
$.mobile.defaultPageTransition = 'slide';
});
</script>
HTML看起来像这样：
<div data-role="page" class="pageFix" id="pageOne">
<div data-role="header">
<h1>Insert Page Title Here</h1>
</div>
<div data-role="main" class="ui-content">
<p>Insert Content Here</p>
<a href="#pageTwo" class="ui-btn">Link 1</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>Insert Footer Text Here</h1>
</div>
</div>
<div data-role="page" class="pageFix" id="pageTwo">
<div data-role="header">
<h1>Insert Page 222</h1>
</div>
<div data-role="main" class="ui-content">
<p>Insert 222</p>
<a href="#pageOne" class="ui-btn">Link 2</a>
</div>
<div data-role="footer" data-position="fixed">
<h1>Insert Footer Text Here</h1>
</div>
</div>
</div>
最后一个是最重要的，在JQM css文件下，我添加了以下样式：
CSS已更新！！！
body{margin:0;padding:0;outline:none;border:0;word-wrap:break-word;}
#main{position:absolute;width:100%;height:100%;max-height:100%;padding:0!important;-webkit-overflow-scrolling: touch;}
.ui-page {-webkit-backface-visibility:hidden;}
.ui-mobile-viewport-transitioning .pagesi,
.ui-mobile-viewport-transitioning .ui-page .pagesi{
height:100%!important;padding-bottom:0!important
}
过渡时似乎发生了一些事情，所以我要做的是在过渡期间将页面的高度设置为100％，然后执行此工作。仍在测试中，如果我发现一些更好的解决方案将与您分享！
希望有帮助！
干杯!
关于jquery - jQM页脚在转换之前和之后消失并显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23884863/