我参加聚会有点晚了,但我遇到了类似的问题,并提出了一个解决方案,(到目前为止)似乎在这个问题的所有情况下都有效。我喜欢这个解决方案,因为据我所知,它独立于浮动元素工作——你所需要的只是你想要获得其真实宽度/位置的元素,仅此而已。出于速度目的,我使用纯 Javascript 完成了它,但如果您愿意,可以使用 jQuery 和单独的 CSS 样式表轻松简化它。
//Get the rendered bounding box for the content of any HTMLElement "el"
var getLimits = function(el) {
//Set a universal style for both tester spans; use "!important" to make sure other styles don't mess things up!
var testerStyle = 'width: 0px!important; overflow: hidden!important; color: transparent!important;';
//Create a 'tester' span and place it BEFORE the content
var testerStart = document.createElement('SPAN');
testerStart.innerHTML = '|';
var testerFloat = ' float: left!important;';
testerStart.setAttribute('style', testerStyle + testerFloat);
//Insert testerStart before the first child of our element
if (el.firstChild) {
el.insertBefore(testerStart, el.firstChild);
} else {
el.appendChild(testerStart);
}
//Create a 'tester' span and place it AFTER the content
var testerEnd = document.createElement('SPAN');
testerEnd.innerHTML = '|';
testerFloat = ' float: right!important;';
testerEnd.setAttribute('style', testerStyle + testerFloat);
el.appendChild(testerEnd);
//Measure the testers
var limits = {
top: testerStart.offsetTop,
bottom: testerEnd.offsetTop + testerEnd.offsetHeight,
left: testerStart.offsetLeft,
right: testerEnd.offsetLeft
}
//Remove the testers and return
el.removeChild(testerStart);
el.removeChild(testerEnd);
return limits;
};
因此,在您的情况下,代码将是:
var paragraphBoundingBox = getLimits($('div>p').get(0));
有几点需要注意:
1) 如果您使用的是 RTL 语言,则浮动方向会反转
2) 输出对象中的所有四个边缘位置都是相对于 el.offsetParent - 使用这个方便的函数可以找到它们相对于文档的位置。