...事实上，我放在
之前的所有标记<div data-role="page">...</div>
可见的时间很短，当页面完全呈现时，所有这些内容都会消失。尽管它在 Source/Firebug 中仍然可见。
我正在为这个元素使用 HTML5Boilerplate。这是一些代码 - 也许有一些我没有发现的碰撞？!
<head>
<link rel="stylesheet" href="styles/normalize.css"/>
<link rel="stylesheet" href="styles/vendor/jquery.mobile-1.2.0.css"/>
<link rel="stylesheet" href="styles/vendor/jquery.mobile.structure-1.2.0.css"/>
<link rel="stylesheet" href="styles/vendor/jquery.mobile.theme-1.2.0.css"/>
<script type="text/javascript" src="scripts/vendor/modernizr-2.6.1.min.js">
</script>
</head>
<body>
<!-- header disappears after page is rendered :( //-->
<div data-role="header">
Here goes the Head-Content
</div>
<h3>This content disappears also :( ... </h3>
<!-- everything below this point stays visible! //-->
<div data-role="page">...</div>
</body>
...
<script type="text/javascript" src="scripts/vendor/jquery-1.8.3.min.js">
</script>
<script type="text/javascript" src="scripts/vendor/jquery.mobile-1.2.0.min.js">
</script>
最佳答案
如问:)
在 jQuery Mobile 中，data-role="page" 不是您内容的容器，它实际上是您要提供的页面，不会显示任何其他内容。您需要将 data-role="header" 放在 data-role="page" 中，它会起作用
来自 jquerymobile.com 的基本 jQuery 移动页面:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
// Anything here will not be on the page
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
// Anything here will not be on the page
</body>
</html>
关于css - Jquery 手机 : Header is visible and then immediately disappears when page is fully rendered，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14216210/