IE scrollWidth问题的解决方法

Question

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

有关我为什么要相互检查它们的上下文,请参阅以下问题:HTML - 如何在省略号激活时显示工具提示

有关此问题的示例,请参阅: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

找到了适用于 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/