IE scrollWidth问题的解决方法

问题描述

我似乎偶然发现了IE中的一个错误，该错误中的scrollWidth与offsetWidth相比偏移了1px。触发条件似乎取决于元素中文本/字符的长度，并且仅在将溢出设置为可见以外的其他条件时发生。

I seem to have stumbled onto a bug in IE where the scrollWidth is off by 1px compared to the offsetWidth. The trigger to this seems to be dependent on the length of the text/characters in the element and only happens when overflow is set to something other than visible.

为什么我要互相检查对方，请参见以下问题：

For context on why I am checking them against each other see this question: HTML - how can I show tooltip ONLY when ellipsis is activated

有关该问题的示例，请参见：

For an example of the issue see: 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显式设置为溢出时：auto ），IE知道它的代码中实际上并没有溢出。

You will notice in the example, though the first item has room to grow to whatever size it wants, its width is set 1px too short, or the scrollWidth reported is 1px too big, as well as the fact that no scrollbar is thrown (when CSS explicitly set to overflow: auto), IE knows somewhere in its code it is not actually overflowing.

问题是，对于此问题，您建议的解决方案或解决方法是什么像是根据div中的字符/字体/字体大小随机发生的？

推荐答案

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

Found a workable workaround for the issue that would work in ie9+. Requires checking the elements getBoundingClientRect() width in addition to the scroll and offset width.

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

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

在IE中检查是否将boundingClient强制设置为与iOffsetWidth相同的大小（而不是使用小数宽度），我们可以确保不使用舍入而不是舍入的错误滚动宽度，例如273.36 ...

By check in IE if the boundingClient is forced to be the same size as the iOffsetWidth (instead of having a fractional width) we can ensure that we don't use the incorrect scroll width that is rounding up instead of down e.g. 273.36...

请参阅以下jsfiddle：

See this jsfiddle: http://jsfiddle.net/gskfke6L/1/

这篇关于IE scrollWidth问题的解决方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！