jquery mobile 固定标题中的图像与内容重叠，直到调整大小事件 [英] Image in jquery mobile fixed header overlaps content until resize event

问题描述

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

I have an image in my jquery mobile fixed header. When the page loads in Google Chrome or Apple Safari the header content overlaps the content div below the header until I resize the page. Firefox and IE work just fine.

谢谢！

推荐答案

我认为问题是当 jQuery Mobile 初始化页面时，没有加载标题图像并且标题要小得多，因此 jQuery Mobile 在页面上放置了 padding.ui-page 元素在图像加载后太小.对此的一个简单解决方法是手动设置标题图像的大小，以便它甚至在其源加载之前就占用所需的空间.

I think the problem is that when jQuery Mobile initializes the page, the header image is not loaded and the header is much smaller so jQuery Mobile puts a padding on the .ui-page element that is too small once the image loads. A simple fix for this is to manually set the size of the header image so that it takes-up it's required space even before its source loads.

你也可以这样做，虽然这对我来说似乎很hacky，通过触发 document.ready 或 window 上的 resize 事件来强制重绘.加载:

You could also do this, although it seems pretty hacky to me, force a redraw by triggering the resize event on document.ready or maybe window.load:

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

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

I pasted this code into the console while on your page and it re-positioned the title element as expected.

这篇关于jquery mobile 固定标题中的图像与内容重叠，直到调整大小事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！