随着这个问题的发展,正确的标题应该是:页面加载时的体宽差异..它还与在页面中调整大小的图片有关.如果我们删除图片,差异就消失了.
请注意,这个问题不需要实际的解决方案(我可以用setTimeout()延迟脚本执行,问题就解决了).我在问,因为我想了解这种行为的技术方面.
在这里写一个答案的脚本时,在SO上,我发现如果在页面加载时或以后计算,元素的高度会有奇怪的差异.
这是片段:
document.initPictures = function() {
$('.resizeMe').css({
'height': $('#theContainer .col-sm-6').eq(1).height() + 6,
'display': 'flex',
'flex-direction': 'column',
'transition': 'height .4s cubic-bezier(0.55, 0, 0.55, 0.2)'
});
$('.resizeMe img').each(function() {
var src = $(this).attr('src');
$('.resizeMe').append('');
$(this).remove();
})
};
document.resizePictures = function() {
if ($('#theContainer').outerWidth() > 768) {
$('.resizeMe').css({
'height': $('#theContainer .col-sm-6').eq(1).height()
});
} else {
$('.resizeMe').css({
'height': $('.resizeMe').outerWidth()
});
}
};
$(window).resize(function() {
document.resizePictures();
});
document.initPictures();
.main-img {
width: 100%;
height: auto
}
#theContainer {
margin-top: 15px;
}
你会注意到我在第二个div中将图像放在第一个div的50%高度(这是要求).在页面加载时,第二个div的图像高度变短6px $('#theContainer .col-sm-6').eq(1).height(),我必须在initPictures()函数中进行补偿,但这种补偿在resizePictures()发生时不是必需的$(window).resize().
我正在使用最新版本的Chrome,但我也在最新的FF中进行了测试.相同的行为.
我很高兴能够理解这种差异是什么.它从何而来？是否与使用jQuery的Bootstrap有关？或者用什么？
注意:在测试时,我也尝试使用innerheight()并outerHeight()希望我可以绕过"bug".那时候他们都很6px矮.
另一个注意:出于测试目的,我为此制作了一个jsFiddle.当我正常加载它时,作为一个小提琴,它有相同的bug并且补偿是必要的.在全屏模式下查看时,不再需要补偿,实际上6px由于补偿,左列更短.
更新:经过一些彻底的测试,使用AvArt记录这个的想法,它出来了它从bodys宽度开始.默认情况下,没有特殊原因,它不是100vw页面加载时.
如果在视口宽度上方加载,你可以检查这个小提琴(768 - 17)px.出于某种原因,你们中的一些人从来没有经历过这个"错误",但我假设有些人做了,因为这个问题已被投票了.但是,如果取消注释CSS的最后一行,则该bug将消失.
因此,对于在页面加载时短时间内具有不同宽度的主体,宽度.col-sm-6受到影响,影响auto所包含图像的高度,从而影响列高度.的6px差(有时7)从图像特定高/宽比产生,但在人体的宽度开始的差的是知识+.
现在,问题仍然存在:为什么body元素在页面加载时的宽度差异为17px 100vw,这应该是默认值,宽度大于(768 - 17)px？
有趣的是,它有做的图片,因为如果我们删除照片HTML,不同的是没有了!
任何熟悉浏览器工作原理的人以及最初如何应用CSS来揭示这种行为？
对于冗长的解释感到抱歉,这是我几天都无法理解的事情,所以我不得不问问并找出答案.
在这里更新了jsFiddle.
京公网安备 11010802040832号 | 京ICP备19059560号-6 