Question

发现涉及jquery和chrome的奇怪之处。如果周围div的显示设置为“none”，则img元素的attr（'width'）似乎返回0。这虽然在firefox和opera中运行良好。

那么，这是一个bug还是chrome断言正确的jquery行为？

以下是一个例子：

<html>
<head>
<script type="text/javascript" src="../jquery-1.4.min.js"></script>
<script type="text/javascript" src="return.js"></script>
</head>

<body>

<div class="foot">
  <img src="images/ref.png" width="500px" height="500px"  />
  <img src="images/ref1.png" width="300px" height="300px"  />
</div>

</body>
</html>

$(document).ready(function(){

$('div.foot').css('display','none');

var imageWidth = $('div.foot img').eq(0).attr('width');

alert(imageWidth); // returns 0 in chrome.

});

Answer 1

我认为这可能是Chrome错误。

首先，我按上述方式运行了您的代码。如您所述，它显示为“0”。

然后，我使用上面的代码，并使用以下代码在开发控制台中显示宽度（500）：

$('div.foot img').eq(0).attr('width');

所以，我重新编写了原始代码，使其略微缩小。这显示了预期的“500”：

$(document).ready(function(){
    $('div.foot').css('display','none');
    alert($('div.foot img').eq(0).attr('width'));
});

之后，我能够运行您的原始代码，并将其警告“500”。

$(document).ready(function(){
    $('div.foot').css('display','none');
    var imageWidth = $('div.foot img').eq(0).attr('width');
    alert(imageWidth); // returns 0 in chrome.
});

简短回答：由于其不稳定的行为，我很确定这是一个错误。

注意：我尝试使用jQuery 1.4.4。

Answer 2

图像显示为inline，并且在隐藏父级时（Chrome中）不提供宽度/高度。

将图片设置为display:block;，Chrome会为您提供宽度/高度。检查一下：http://jsfiddle.net/c4jdv/

这种行为，铬独特，奇怪或正确的结果？

2 个答案: