我的 jquery mobile 固定标题中有一张图片。当页面在 Google Chrome 或 Apple Safari 中加载时，标题内容与标题下方的内容 div 重叠，直到我调整页面大小。 Firefox 和 IE 运行良好。
谢谢！
【问题讨论】：
标签： jquery-mobile
我认为问题在于，当 jQuery Mobile 初始化页面时，没有加载页眉图像并且页眉小得多，因此 jQuery Mobile 在图像加载后太小的.ui-page 元素上放置了一个填充。一个简单的解决方法是手动设置标题图像的大小，以便它在源加载之前占用所需的空间。
您也可以这样做，虽然这对我来说似乎很 hacky，但通过触发 document.ready 或 window.load 上的 resize 事件来强制重绘：
$(window).on('load', function () {
$(this).trigger('resize');
});
我在您的页面上将此代码粘贴到控制台中，并按预期重新定位了标题元素。
【讨论】：
pageshow 上触发resize 事件，则无法确定图像是否已加载并因此具有尺寸。但是，如果您在load 上触发resize 事件，那么您将无法通过AJAX 获得后续页面加载的好处。我仍然建议在 CSS 中设置图像的大小或作为图像元素的属性。
应用以下 CSS 有帮助吗？
.ui-page {
padding-top: 91px !important;
}
请注意，您必须优化选择器，因为这也适用于覆盖弹出窗口。
【讨论】：
我在这方面遇到了很多麻烦。这一直有效，直到我想添加一个链接：
<div data-role="header">
<img border="0" src="logo.png" style="float:left;display:inline"/> <h1></h1>
</div>
注意空的 h1 标签。
我最终根本没有使用 data-role="header"，我只是无法让它与链接一起使用。我改用了 ui-bar 类。像这样：
<div class="ui-bar ui-bar-a">
<a href="/" data-role="none">
<img border="0" src="images/logo.png" style="float: left; display:inline">
</a>
</div>
【讨论】：
对我有用的基于@Jasper 答案的解决方案是：
$(document).on('pageshow', "div[data-role='page']", function () {
$(window).trigger('resize');
});
它的改进适用于所有 jquery 移动页面
【讨论】：
pagecontainershow 而不是 pageshow！
$(document).on( ... function() { setTimeout( function() { $(window).trigger('resize'); }, 100 /*ms*/ ); }); 进行操作才有效！您可能想为您的页面使用100 ms。 Jasper 和 $(window).on('load', function() ... 的解决方案在没有超时的情况下工作，但可能不适用于每个页面导航场景
我使用了来自 Jasper 和 Carlos487 的相当不错的解决方案，发现这是最新且最可靠的方法（ jQM 1.4.x)：
如果是由于图片没有指定尺寸需要一些时间来加载，因此可能导致标题放大，然后指定已知尺寸（最好通过 CSS）应该这样做。否则应该有一种方法可以确定它是否已完成加载，从而应用下面解决方案 3 的想法。
如果这是由于某些（可能）未知的标题调整大小事件（例如，通过稍后加载的某些图像或某些其他内容缩小标题，从而使其垂直变大)，那么这应该与一个合理的足够大的超时值一起工作：
$( ':mobile-pagecontainer' ).on( 'pagecontainershow', function(e) {
// maybe value > 100 needed for your scenario / page load speed
setTimeout( function() { $(window).trigger('resize'); }, 100 /*ms*/ );
}
如果你知道是什么原因造成的 （在我的例子中，我通过一些（否则隐藏/覆盖的）左对齐导航面板在大屏幕上右移页面内容） ，那么以下可能会更好，独立于页面需要在某些设备或场景上加载的实际时间（可能比您上面预定义的超时时间更长）：
// if its due to some animation like in my case
// otherwise try to find a similar way to determine when the resizing event has
// completed!
$('#someAnimated').animate( 'complete', function() { $(window).trigger('resize'); });
（我不确定 Jasper 使用 $(window).on( 'load', ... 的解决方案在所有 jQM 页面加载场景（使用 AJAX 页面导航）中是否正确。这就是为什么我更喜欢 Carlos487在我的例子中是 em> 的方法。）
【讨论】：
load 事件，而不是依赖硬编码的超时为那张图片。
以上解决方案都不适合我。但我发现我的问题在于页面导航后的事件。如果在这段时间内内容 div 被隐藏，它不会被定位在标题 div 下，而是留在原来的位置：
$(document).on("pageshow", "div[data-role='page']", function()
{
$("#pageContentDiv").hide();
setTimeout(function()
{
$("#pageContentDiv").show();
}, 0);
});
编辑： 找到了更好的解决方案；将标题 div 高度和页面 div 顶部填充设置为相同的值：
<div data-role="page" style="padding-top: 60px">
<div data-role="header" data-position="fixed" style="height: 60px">
希望这会有所帮助。
【讨论】：