请注意,这个问题不需要实际的解决方案(我可以通过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.55,0.2)'
});
$('.resizeMe img').each(function() {
var src = $(this).attr('src');
$('.resizeMe').append('<div style="flex-basis: 50%; background-image: url(' + src + '); background-size:cover; background-position: center center"' + '</div>');
$(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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row-fluid" id="theContainer">
<div class="col-sm-6 resizeMe">
<img class="filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
<img class="filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" />
</div>
<div class="col-sm-6">
<img class="main-img" src="http://joombig.com/demo-extensions1/images/gallery_slider/Swan_large.jpg" />
</div>
你会注意到我在第二个div的图像的高度的第一个div的50％的图像(这是要求).在页面加载中,第二个div的图像高度出现在initPictures()函数中我要补偿的6px $(‘#theContainer .col-sm-6’)eq(1).height(),但是这个补偿在resizePictures()中没有必要,它发生在$(window).resize()上).
我正在使用最新版本的Chrome,但是我也在最新的FF中进行了测试.相同的行为
我真的很高兴了解这个区别是什么.它从何而来？它是否与Bootstrap有关,使用jQuery？还是用什么？
注意：测试时,我也尝试使用innerheight()和outerHeight(),希望能够绕过这个bug.在这一点上他们都是6px的短.
另一个注意：为了测试的目的,我为此做了一个jsFiddle.当我正常地加载它,作为一个小提琴,它有相同的错误,并且补偿是必要的.在full screen mode年观察时,补偿不再需要,实际上由于补偿,左列6px更短.
更新：经过一些彻底的测试使用AvArt的记录这个想法,它出来了所有从身体的宽度开始.默认情况下,没有特别的原因,页面加载时不是100vw.
如果在视口宽度(768 – 17)px以上加载,则可以结帐this fiddle.由于某些原因,有些人从来没有遇到过这个“错误”,但我承担了一些事情,因为这个问题已经被投票了.
但是,如果您取消注释CSS的最后一行,则该错误消失.
因此,对于在页面加载时短时间内具有不同宽度的主体,影响到.col-sm-6的宽度,影响所包含图像的自动高度,影响柱高度. 6px的差异(有时是7)是由于图像的特定高/宽比而导致的,但身体宽度的起始差异是17px.
现在,问题仍然是开放的：为什么body元素在100vw的页面加载宽度上有一个17px的差异,这应该是默认的,宽度高于(768 – 17)px？
有趣的是它与图片有关,因为如果我们从HTML中删除图片,差异就消失了！
任何熟悉浏览器工作原理的人,以及CSS如何最初应用于此行为？
对于漫长的解释很抱歉,这只是我几天无法想象的事情,所以我只好问问一下.
