Question

我似乎偶然发现IE中的一个错误，其中scrollWidth与offsetWidth相比偏差了1px。对此的触发器似乎取决于元素中文本/字符的长度，并且仅当溢出设置为可见之外的其他内容时才会发生。

有关我为何互相检查这些问题的背景请参阅此问题：HTML - how can I show tooltip ONLY when ellipsis is activated

有关问题的示例，请参阅：http://jsfiddle.net/w5cwhjbf/2/

.base{
    font-size: 16px; 
    overflow: hidden;    
}

.wrapper{
    float: left;  
}

<div class="wrapper">
    <div id="div1" class="base">
        Why is my scrollWidth wrong in IE?
    </div>
</div>
<br style="clear: both;">
<br>
<button id="btn1" onclick="fnCheckScroll(div1,btn1)">Calculates Wrong</button>
<br>
<br>
<br> 
<div class="wrapper">
    <div id="div2" class="base">
        Why is my scrollWidth right in IE?
    </div>
</div>
<br style="clear: both;">
<br>
<button id="btn2" onclick="fnCheckScroll(div2,btn2)">Calculates Correctly</button>
<br>
<br>
<br>
Issue seems to be based on the character widths/font size resulting in I would assume a fractional value that in one case gets rounded up and the other rounded down.  The issue however does not ever cause scroll bars to appear (if overflow is auto).  Issue doesnt happen with overflow: visible.
  
        
<script type="text/javascript">
function fnCheckScroll(div, btn)
{    
   var iScrollWidth = div.scrollWidth;
   var iOffsetWidth = div.offsetWidth;
   var iDifference = iScrollWidth - iOffsetWidth;
   btn.innerHTML = ("Width: " + iOffsetWidth + "px  |  scrollWidth: " + iScrollWidth + "px  |  Difference: " + iDifference + "px"); 
}
</script>

你会注意到在这个例子中，虽然第一个项目有增长到它想要的大小的空间，但它的宽度设置为1px太短，或者报告的scrollWidth是1px太大，以及没有滚动条的事实是抛出（当CSS显式设置为overflow：auto时），IE知道它的代码中某处实际上并没有溢出。

问题是，对于此问题，您的建议修正或解决方法是什么，因为它似乎是根据div中的字符/ font / font-size随机发生的？

Answer 1

如果不知道这个错误如何适用于您的特定问题，很难提供最佳解决方案。话虽这么说，你可以：

使用javascript错误修复来调整属性/样式/等。如果两个元素的大小不同。

if(iDifference != 0) { /* make adjustments. */ }
在两个元素之间使用公差检查;如果差异小于或等于2px，则不要担心并正常处理所有内容。

if(Math.abs(iDifference) <= 2) { /* no problem here! */ }
将外部元素用于所有计算，因为它具有容器的真实宽度。
将内部元素用于所有计算，因为它永远不会导致与外部元素重叠。
什么都不做！如果它没有被破坏，为什么要修理它？

这完全取决于您尝试做什么以及1px差距如何导致问题。

Answer 2

尝试为班级padding-right: 1px;设置.base。

.base{
    font-size: 16px; 
    overflow: hidden;
    padding-right: 1px;    
}

Answer 3

找到了适用于ie9 +的问题的可行解决方法。除了滚动和偏移宽度之外，还需要检查元素getBoundingClientRect（）的宽度。

var boundingClientRectWidth = element.getBoundingClientRect().width;
var iScrollWidth = div.scrollWidth;
var iOffsetWidth = div.offsetWidth;

var amIOverflowing = (iScrollWidth > iOffsetWidth) && (boundingClientRectWidth == iOffsetWidth);

通过在IE中检查是否强制boundingClient与iOffsetWidth的大小相同（而不是具有小数宽度），我们可以确保我们不使用向上舍入而不是向下舍入的不正确的滚动宽度。 273.36 ...

请参阅此jsfiddle：http://jsfiddle.net/gskfke6L/1/

使用IE scrollWidth

3 个答案: