Question

我有一个特殊的用例，我需要得到一个宽度和高度，以及它的偏移量。

在IE11上，它按预期工作，即我可以

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

但是在Chrome中，偏移量似乎返回MAP父级的左上角坐标，而宽度和高度返回0。

在我彻底改变方法并拆开一堆代码之前，有没有办法让Chrome在这方面表现得像IE？（好笑，这不是我曾经想过的问题我会问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

我发现了Chrome最近提交的错误报告，该报告似乎与您的问题有关：https://bugs.chromium.org/p/chromium/issues/detail?id=606506

在报告中，提到区域的默认样式display: inline; width: 0; height: 0会导致问题。基于此，我尝试了一种样式解决方法，将display:block;添加到样式中。这导致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

通过向样式添加width和height，它可以正常工作，但为每个区域添加特定样式可能会很繁琐。

似乎没有合理的解决方案＆＃34;使Chrome的行为与IE一样，而不是等到错误得到解决。

最佳解决方法我可以在此期间提出，使用coords属性来计算宽度和高度：

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);

您也可以使用坐标计算偏移量，并为其他形状创建类似的变通方法。

为什么Chrome中的区域没有宽度？

1 个答案: