jQuery移动固定标头中的图像与内容重叠,直到发生调整大小事件为止 [英] Image in jquery mobile fixed header overlaps content until resize event
问题描述
我的jquery移动固定标头中有一个图像.当页面加载到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在标头上添加了填充.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.
您也可以执行此操作,尽管对我来说似乎很棘手,但可以通过触发document.ready
或window.load
上的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移动固定标头中的图像与内容重叠,直到发生调整大小事件为止的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!