Javascript IE scrollWidth问题的解决方法

我似乎在IE中偶然发现了一个bug，其中scrollWidth与offsetWidth相比减少了1px。触发此操作的触发器似乎取决于元素中文本/字符的长度，并且仅当溢出设置为非可见时才会发生

有关我为什么要相互检查它们的上下文，请参见以下问题：

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

.base{
字体大小：16px；
溢出：隐藏；
}
.包装纸{
浮动：左；
}

为什么我的卷轴宽度在IE中是错误的？




算错






为什么我的卷轴宽度在IE中正确？




正确计算






问题似乎是基于字符宽度/字体大小，因此我假设一个分数值在一种情况下向上舍入，而在另一种情况下向下舍入。但是，该问题不会导致出现滚动条（如果溢出是自动的）。溢出时不会发生问题：可见。
功能fnCheckScroll（div，btn）
{    
var iScrollWidth=div.scrollWidth；
var iOffsetWidth=div.offsetWidth；
变量iDifference=iScrollWidth-iOffsetWidth；
btn.innerHTML=（“宽度：+iOffsetWidth+”px |滚动宽度：+iScrollWidth+”px |差异：+iDifference+”px”）；
}

如果不知道这一点如何适用于此bug的特定问题，就很难给出最佳解决方案。尽管如此，您可以：

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

  如果（i差异！=0）{/*进行调整。*/}

• 在两个元件之间进行公差检查；如果差值小于或等于2px，那么不用担心，一切正常处理

  ---

  if（Math.abs（iDifference）尝试将类
  .base
  的
  填充设置为正确：1px；
  
  .base{
      font-size: 16px; 
      overflow: hidden;
      padding-right: 1px;    
  }
  
  找到了一个适用于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
  
  查看此JSFIDLE:
  虹吸，我发现我忘记了包含指向我为什么使用检查的特定用例的链接。它现在已包含在上面。然后我建议您使用内部容器宽度。如果需要，您甚至可能需要在宽度上修剪一些像素以进行填充。担心1像素似乎是一件小事t如果您使用5px到20px作为填充。虹吸，根据用例，我们使用计算来确定文本溢出：省略号是否发生。（它仅在相同情况下触发滚动条显示）。在这种情况下，由于这个问题，IE无法区分它是1px溢出并有省略号，与它报告1px关闭但没有溢出且不需要工具提示之间的区别。忽略这个问题，您会一直得到工具提示。通过对计算给予1px宽限，您可以得到文本被截断的情况（省略号）但不显示带有全文的工具提示。在这两种情况下，用户体验都会受到影响。使用固定的表格布局（签出
  表格布局：固定；
  与
  文本溢出：省略号
  相关）？听起来使用CSS解决方案可以解决很多问题。检查：否，表布局：修复无法解决问题，因为关键是要有div（或其他元素），这些div（或其他元素）可以根据窗口动态调整大小。当它们调整大小时，文本现在可能会溢出（导致省略号）。动态添加工具提示允许用户查看全文，即使在较小的窗口大小下查看也是如此。使用mouseenter+javascript计算可以使所有内容轻松，并防止浏览器过载。链接的建议存在一个问题，即您必须正确传输所有继承的CSS，这可能非常困难没有SrollWidths那么轻嘿，你有没有找到一个很好的解决方法？遗憾的是没有，我们不得不在IE版本的javascript检查中加上1px的宽限，并处理偶尔出现的问题，其中由于计算错误，工具提示没有显示出来。是的，也有同样的问题..sucksUpdate:在Edge上记录了一个bug，微软已经重新发布了ady修复了它，所以这应该是一个非问题的浏览器，但你仍然会看到在IE中的问题：有人有良好的解决办法以外的上述？