Jquery mobile jquery mobile固定标题中的图像与内容重叠，直到调整大小事件发生

我的jquery mobile固定标题中有一个图像。当页面加载到Google Chrome或Apple Safari中时，标题内容与标题下方的内容div重叠，直到我调整页面大小。Firefox和IE工作得很好

---

谢谢

应用以下CSS是否有帮助

.ui-page {
    padding-top: 91px !important;
}

---

请注意，您必须优化选择器，因为这也将应用于覆盖弹出窗口。

我认为问题在于，当jQuery Mobile初始化页面时，标题图像没有加载，并且标题要小得多，因此jQuery Mobile会在

.ui页面

元素上添加一个填充，该填充在图像加载后太小。一个简单的修复方法是手动设置标题图像的大小，以便它在加载源之前就占用所需的空间

您也可以这样做，尽管我觉得这很不方便，但可以通过触发

document.ready

或

window.load

上的

resize

事件来强制重画：

$(window).on('load', function () {
    $(this).trigger('resize');
});

---

我在您的页面上将此代码粘贴到控制台中，它按预期重新定位了title元素。

我在这方面遇到了很多问题。在我想添加链接之前，这一直有效：

<div data-role="header">
  <img border="0" src="logo.png" style="float:left;display:inline"/> <h1></h1>
</div>

注意空的h1标签

我最终根本没有使用data role=“header”，只是无法让它与链接一起工作。我使用了一个ui栏类。像这样：

<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-answer的解决方案对我有效：

$(document).on('pageshow', "div[data-role='page']", function () {
    $(window).trigger('resize');
});

---

它有一个适用于所有jquery移动页面的改进

我使用了Jasper和Carlos487提供的相当好的解决方案，发现这是最新和最可靠的方法（jQM 1.4.x）：

$( ':mobile-pagecontainer' ).on( 'pagecontainershow', function(e) {
  // maybe value > 100 needed for your scenario / page load speed
  setTimeout( function() { $(window).trigger('resize'); }, 100 /*ms*/ );
}

如果是由于没有指定尺寸的图像导致加载需要一些时间，因此可能会导致页眉放大，那么指定已知尺寸（理想情况下通过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*/ );
}

如果您知道是什么原因造成了这种情况（在我的案例中，我通过一些（隐藏/覆盖的）左对齐导航面板在大屏幕上右移页面内容），那么下面的情况可能更好，与页面在某些设备或场景上加载的实际时间无关（可能比上面预定义的超时时间长）：

---

（我不确定Jaspers解决方案是否使用

$（窗口）。在（'load'，…

）上，在所有jQM页面加载场景中（使用AJAX页面导航）都是正确的。这就是为什么在我的示例中我更喜欢Carlos487的方法。）

上述解决方案对我都不起作用。但我发现我的问题在于页面导航后的事件。如果在此期间内容div被隐藏，则它不会定位在标题div下，而是停留在其原始位置：

$(document).on("pageshow", "div[data-role='page']", function()
{
   $("#pageContentDiv").hide();
   setTimeout(function()
   {
      $("#pageContentDiv").show();
   }, 0);
});

编辑： 找到了更好的解决方案；将页眉div height和页面div top padding设置为相同的值：

<div data-role="page" style="padding-top: 60px">
<div data-role="header" data-position="fixed" style="height: 60px">

---

希望这能有所帮助。

这正是我面临的问题！如果我能找到答案，疑难解答…将与大家分享解决方案。@kctang您是否尝试过指定图像的高度？嗯……这太尴尬了。一旦我插入图像的高度和宽度属性，它就工作得非常好。难以置信的简单。谢谢。下面的Carlos解决方案似乎更有用适当的：使用jQM加载功能执行此操作：@AndreasDietrich从2012年起就知道了此问题：，这是一种有趣的情况。如果在

pageshow

上触发

resize

事件，则无法确定图像是否已加载，因此是否具有尺寸。但是如果触发

resize

事件在

load

上，您将无法通过AJAX获得后续页面加载的好处。我仍然建议您在CSS中设置图像的大小，或将其作为图像元素的属性。@Jasper：是的，对……在我下面更完整的回答中添加了图像维度情况：我遇到了相同类型的问题，但我的标题中没有图像。Regardless，这个解决方案解决了我的问题。谢谢！很棒的thx和：从1.4.0开始，人们应该使用

pagecontainershow

，而不是

pagecontainershow

。但是它只对我稍后通过

$（文档）进行操作有效。（…函数（）{setTimeout（函数（）{$（窗口）。触发器（'resize'）；}，100/*ms*/）}）

！您可能需要为页面使用

100

ms。Jasper提供的解决方案带有

$（窗口）。on（'load'，function（）…

在没有超时的情况下工作，但可能对每个页面导航场景都不正确谢谢@AndreasDietrich我会检查并更新答案，而不是在等待图像加载时依赖硬编码超时，您可能只想检测头中是否有图像，并将事件处理程序附加到

加载该图像的事件。@Jasper:可以在场景3中添加这样的示例。如果您愿意，请在我的帖子中