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

我有一个奇特的用例，我需要获取宽度和高度，以及它的偏移量。为什么Chrome中的区域没有宽度？

在IE11，它按预期工作，也就是说我可以做

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

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

在我完全切换我的方法并拆分一堆代码之前，有没有什么办法让Chrome在这方面表现得像IE？（搞笑，这不是我没有想过我会问笑 :)问题）

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

来源

2016-05-17 Ben A. Hilleli

我发现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款式，它的工作原理，但可能是单调乏味的工作，以特定的样式添加到每个区域。

看起来似乎没有一个合理的“修复”，使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);

可以使用坐标计算偏移为好，为其他形状创建类似的解决方法。

来源

2016-05-18 00:01:09 Puppetmupp

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

回答

相关问题