針對IE問題的解決方法scrollWidth

我似乎偶然發現了IE中的一個bug，其中scrollWidth與offsetWidth相比偏離了1px。對此的觸發似乎取決於元素中文本/字符的長度，只有當溢出設置爲除可見以外的內容時纔會發生。針對IE問題的解決方法scrollWidth

爲背景，爲什麼我檢查他們互相看這個問題：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太大，以及t事實上，沒有滾動條被拋出（當CSS明確設置爲溢出：自動），IE知道它的代碼中的某處實際上並沒有溢出。

問題是，你會針對這個問題建議修正或解決方法是什麼，因爲它似乎是隨機發生在div中的字符/字體/字體大小？

來源

2015-06-17 Chris Janssen

嘿，你遇到一個很好的解決方法呢？ –

不幸的是，我們不得不在IE瀏覽器版本的javascript檢查中加入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 ...

看到這個的jsfiddle：http://jsfiddle.net/gskfke6L/1/

來源

2017-11-08 02:07:28

如果不知道這個bug如何適用於您的特定問題，很難提供最佳解決方案。這就是說，你可以：

使用JavaScript錯誤修復來調整屬性/樣式/等。如果這兩個元素是不同的大小。

if(iDifference != 0) { /* make adjustments. */ }
使用兩個元素之間的公差檢查;如果差異小於或等於2px，那麼不要擔心它並按正常方式處理所有內容。

if(Math.abs(iDifference) <= 2) { /* no problem here! */ }
使用爲所有計算的外元件中，由於具有在容器的真實寬度。
使用內部元素進行所有計算，因爲這不會導致與外部元素重疊。
什麼都不做！爲什麼修復它，如果它沒有損壞？

這一切都取決於你想要做什麼以及1px間隙如何導致問題。

來源

2015-06-17 19:33:50 Siphon

虹吸管，我看到我忘記包含爲什麼使用支票的具體用例的鏈接。它現在包含在上面。 –

然後我會建議你使用內部容器的寬度。如果需要，您甚至可能需要修剪幾個像素寬度以進行一些填充。擔心1 px看起來像是一個微不足道的事情，擔心如果你使用5px到20px的填充。 – Siphon

虹吸，根據用例，我們使用計算來確定文本溢出：省略號是否正在發生。（它只會在相同情況下觸發滾動條顯示）。在這種情況下，在IE中由於這個問題你不能區分它是1px溢出和省略號，它報告1px關閉，但不是溢出，並不需要工具提示。通過忽略該問題，您始終得到一個工具提示。通過給計算帶來1px的寬限，你會得到文本被截斷（省略號）的情況，但是沒有顯示全文的工具提示。在這兩種情況下，UX都會受到影響。 –

嘗試設置類別.base的padding-right: 1px;。

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

來源

2016-10-06 08:50:25

針對IE問題的解決方法scrollWidth

回答

相關問題