Warum haben Bereiche in Chrome keine Breite?

Question

Ich habe einen seltsamen Anwendungsfall, wo ich die Breite und Höhe eines, sowie es Offset bekommen muss.

Auf IE11, es wie erwartet funktioniert, dh ich

$("area:eq(1)").offset().left; 
$("area:eq(1)").outerWidth(); 

Aber in Chrome tun, Offset scheint die oberen linken Koordinaten der MAP Eltern, während Breite und Höhe Rückkehr 0.

zurückzukehren

Bevor ich meinen Ansatz komplett umstelle und eine Menge Code auseinander nehme, gibt es eine Möglichkeit, Chrome in diesem Zusammenhang wie IE zu verhalten? (lustig, das ist keine Frage, die ich jemals dachte, ich würde fragen lol :))

<img name="index" src="index.jpg" width="3500" height="973" border="0" id="index" usemap="#m_index" alt=""> 
    <map name="m_index" id="m_index"> 
    <area shape="rect" coords="173,95,249,237" href="javascript:;" alt=""> 
    <area shape="rect" coords="94,95,170,237" href="javascript:;" alt=""> 
    <area shape="rect" coords="12,94,88,236" href="javascript:;" alt=""> 
    </map> 

Answer 1

ich einen kürzlich eingereichten Bug-Report für Chrome gefunden, die auf Ihre Frage zu beziehen scheint: https://bugs.chromium.org/p/chromium/issues/detail?id=606506

In dem Bericht wird erwähnt, dass der Standardstil des Bereichs display: inline; width: 0; height: 0 das Problem verursacht. Basierend auf diesem, versuchte ich eine Styling-Problemumgehung durch Hinzufügen display:block; zu Stil. Dies führte in der falschen Breite und Höhe Null in Chrome

<area shape="rect" coords="94,95,170,237" style="display:block;" href="javascript:;" alt=""> 

$("area:eq(1)").outerWidth(); //returns 280 instead of 76 
$("area:eq(1)").outerHeight(); //returns 0 instead of 142 

Durch das Hinzufügen width und height zu Stil zurückgegeben werden, es funktioniert, aber vielleicht mühsame Arbeit seines bestimmten Stil zu jedem Bereich hinzuzufügen.

Es scheint so, als gäbe es keinen vernünftigen "Fix", der Chrome dazu bringt, sich wie IE zu verhalten, außer zu warten, bis der Fehler behoben ist.

Die beste Abhilfe ich in der Zwischenzeit kommen kann, wird die Breite und Höhe der Berechnung unter Verwendung des coords Attribut:

var area = $("area[shape=rect]").eq(1); //select areas with rectangle shape only 
var coords = area.attr('coords').split(','); 

var x1 = coords[0], 
y1 = coords[1], 
x2 = coords[2], 
y2 = coords[3]; 

var width = Math.abs(x1-x2); 
var height = Math.abs(y1-y2); 

Sie die Koordinaten der Offset als auch für die Berechnung verwendet werden können, und Erstellen Sie ähnliche Problemumgehungen für andere Formen.