javascript - IE scrollWidth 问题的解决方法

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 中的字符/字体/字体大小随机发生的？

Answer 1

如果不知道这如何适用于您的特定问题，则很难给出最佳解决方案。话虽如此，您可以:

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

  if(iDifference != 0) { /* make adjustments. */ }

• 在两个元素之间使用公差检查；如果差异小于或等于 2px，则无需担心并正常处理所有内容。

  if(Math.abs(iDifference) <= 2) { /* no problem here! */ }

• 使用外部元素进行所有计算，因为它具有容器的真实宽度。

• 使用内部元素进行所有计算，因为这永远不会导致与外部元素重叠。

• 什么都不做!如果它没有损坏，为什么要修复它？

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