Workaround für das Problem mit IE scrollWidth

Question

Ich habe auf einen Fehler in IE gestoßen, wo die ScrollWidth um 1px im Vergleich zu der OffsetWidth off ist. Der Auslöser dafür scheint von der Länge des Textes/der Zeichen im Element abhängig zu sein und tritt nur auf, wenn der Überlauf auf etwas anderes als sichtbar gesetzt ist.

Für Kontext auf, warum ich sie gegeneinander sehen, diese Frage bin Überprüfung: HTML - how can I show tooltip ONLY when ellipsis is activated

Ein Beispiel für die Ausgabe sehen: 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>

Sie werden feststellen, in das Beispiel, obwohl das erste Element Platz hat, um zu irgendeiner gewünschten Größe zu wachsen, ist seine Breite 1px zu kurz eingestellt, oder die scrollWidth berichtete 1px zu groß ist, sowie t Die Tatsache, dass keine Bildlaufleiste ausgelöst wird (wenn CSS explizit auf Überlauf gesetzt ist: auto), weiß IE irgendwo in seinem Code, dass es nicht wirklich überläuft.

Frage ist, was wäre Ihre vorgeschlagene Reparatur oder Workaround für dieses Problem, da es scheint, dass es zufällig auf der Grundlage der Zeichen/font/font-Größe in der div?

Answer 1

Eine funktionierende Problemumgehung für das Problem gefunden, das in ie9 + funktionieren würde. Erfordert die Überprüfung der Elemente getBoundingClientRect() - Breite zusätzlich zur Scroll- und Offset-Breite.

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

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

Per Scheck in IE, wenn das boundingClient gezwungen ist, die gleiche Größe wie die iOffsetWidth zu sein (statt eine Bruchbreite von) können wir sicherstellen, dass wir nicht werfen die falsche Scroll Breite verwenden, die oben runden statt runter z 273,36 ...

dieses jsfiddle Siehe: http://jsfiddle.net/gskfke6L/1/

Answer 2

Es ist schwierig, die beste Lösung zu finden, ohne zu wissen, wie das auf Ihr spezifisches Problem mit diesem Fehler zutrifft. Das heißt, Sie könnten:

Verwenden Sie eine Javascript Bug-Fix, um die Attribute/Stile/etc. wenn die zwei Elemente unterschiedliche Größen haben.

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

Verwenden einer Toleranzprüfung zwischen den beiden Elementen; Wenn die Differenz kleiner oder gleich 2px ist, dann mach dir keine Sorgen darüber und verarbeite alles wie gewohnt.

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

Verwenden der äußere Element für alle Berechnungen, da, dass die wahre Breite des Behälters aufweist.

Verwenden Sie das innere Element für alle Berechnungen, da dies niemals zu einer Überlappung mit dem äußeren Element führt.

Nichts tun! Warum es reparieren, wenn es nicht kaputt ist?

Es hängt alles davon ab, was Sie versuchen zu tun und wie die 1px-Lücke ein Problem verursacht.

Answer 3

Versuchen Sie, die padding-right: 1px; für die Klasse .base einzustellen.

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