我在Chrome中看到一个问题,当使用jQuery删除页面并向页面添加元素时,元素会呈现两次。它们被正确渲染,然后再次渲染在它们自身的上方,但稍微偏移。
之后,当您调整窗口大小时,问题会消失,或者有时在某些窗口大小时根本不显示。
这似乎是Windows和Mac中最近一个Chrome版本中出现的错误。在Firefox,Safari for Mac或Win7上的IE10中都不会发生。
阻止这种情况发生的正确方法是什么?我的javascript有问题吗?
当使用左侧链接切换位置时,会发生在下一页:
http://affordableattic.com/locations/#donna
截图:
这是jQuery,我在页面上替换了有问题的元素:
if(locationPhoto.indexOf("crystal/default.png") < 0){
currentItem = '<div class="streetview"><img src="' + locationPhoto + '" alt="' + locationAlt + '" class="alignnone size-large wp-image-605"></div>';
}
if(mgrPhoto.indexOf("crystal/default.png") < 0 && mgrPhoto != "false"){
currentItem += '<div class="storemanager"><img src="' + mgrPhoto + '" alt="' + mgrAlt + '" class="alignnone size-full wp-image-592" />';
currentItem += '<span class="caption"><!--googleoff: all-->' + mgrCaption + '<!--googleon: all--></span></div>';
}
if(tabletLinks || mobile){
address = '<a href="' + mapLink + '">' + address + '</a>';
}
if(mobile){
phone = '<a href="tel:1-' + phone + '">' + phone + '</a>';
}
currentItem += '<div class="clear"></div><h2>' + title + '</h2><div class="contact">';
currentItem += '<p><i class="icon-map-marker icon-2x pull-left"></i>' + address + '</p>';
currentItem += '<p><i class="icon-phone icon-large pull-left"></i> ' + phone + '</p>';
if(truckRental != ''){ currentItem += '<p><i class="icon-phone icon-large pull-left"></i> ' + truckRental + '</p>'; }
currentItem += '<p><i class="icon-envelope-alt pull-left"></i> <a href="mailto:' + email + '?Subject=' + emailSubject + '">' + email + '</a></p>';
currentItem += '<div class="buttons">';
currentItem += locationText;
currentItem += '</div>';
currentItem += '<div class="clear"></div></div>';
iconTime = '<p><i class="icon-time icon-large pull-left"></i>';
currentItem += '<div class="hours">';
currentItem += iconTime + mon + '</p>';
currentItem += iconTime + tues + '</p>';
currentItem += iconTime + wed + '</p>';
currentItem += iconTime + thu + '</p>';
currentItem += iconTime + fri + '</p>';
currentItem += iconTime + sat + '</p>';
if(sunD != "" ){ currentItem += iconTime + sunD + '</p>'; }
currentItem += '</div>';
currentItem += '<div class="buttons standalone">';
currentItem += locationText;
currentItem += '</div>';
container.fadeOut('slow', function()
{
container.hide().empty().html(currentItem).fadeIn('slow');
});
如果您想查看完整的脚本,请告诉我。还有其他一些事情正在发生,比如地图和哈希变换。