Safari中的jQuery.height(）错误

jQuery .height() wrong in Safari

本文关键字：错误 height 中的 jQuery Safari      更新时间：2023-11-19

我在Safari中用jQuery读取DIV的正确高度时遇到问题。我正在使用jQuery("#x").height()来读取元素的高度。在实际情况下，我稍后会在页面中使用结果。它在Chrome、Firefox和IE中运行良好，但在Safari中则不然。

以下是我从页面中提取的一些代码，这些代码演示了这个问题：

CSS：

#x {
  position: absolute;
  top: 0px;
  margin-top: 80px;
  right: 54%;
  width: 40vw;
  height: auto;
  max-width: 330px;
  padding: 10px 3.1vw 16px;
  background: #ddd;
  }
.y {
  position: relative;
  width: 100%;
  max-width: 330px;
  height: auto;
  max-height: 330px;
}
.y img {
  width: 100%;
  height: auto;
}

（有些参数看起来多余或奇怪，但我需要在我的上下文中使用它们，如果我忽略它们，也不会改变问题）

HTML:

<div id="x">
  <h2>Header</h2>
  <div class="y">
    <img src="https://placehold.it/330" alt="my image">
  </div>
  <p class="z"><span>Some text</span><br>Some more text...</p>
</div>

现在，有了这个jQuery代码，我会根据浏览器得到不同的结果：

console.log(jQuery("#x").height());

我把这一切都写进了一个代码笔：http://codepen.io/anon/pen/MyELJV?editors=1111

如果您在Firefox中加载它，控制台输出为469。如果你在Safari中加载，它是154。（此外：在Chrome/MacOS和IE11/Win7中，该值均为466）。差异的一小部分是由于默认样式不同，但主要问题是Safari在获取高度时没有考虑图像。

如果尝试了不同的方法（没有解决问题）：

  • 我尝试了innerHeight()、outerHeight()和outerHeight(true)而不是height()——没有基本区别（值略有不同，但Safari中仍然存在问题）
  • 我将width=330 heigth=330作为属性添加到img标记中，它在代码笔中有效，但在我的真实情况下（使用另一个图像）无效。除此之外，整个过程都是响应性的，所以无论如何我都想省略这些属性

顺便说一句：原始图像都是330x330px（即所有图像的纵横比都是1:1），但它们在较小的屏幕上被缩小了。

如果能给我一个解决方案，我将不胜感激。。。

我更改了你的css，这样safari就不会改变图像的高度。

#x {
  position: absolute;
  top: 0px;
  margin-top: 80px;
  right: 54%;
  width: auto;
  height: auto;
  /* max-width: 330px; */
  padding: 10px 43px 16px;
  background: #ddd;
}
.y {
  position: relative;
  width: 100%;
  max-width: 330px;
  height: auto;
  max-height: 330px;
}
.y img {
  width: auto;
  height: auto;
}

还可以使用load函数来获取#x的精确高度。

$(window).load(function(){
   console.log($("#x").height());  
});

您可以在此处引用更改后的代码。

我为这个问题争论了很多。Safari在获取元素高度时遇到了很多问题，但我找到了一个返回特定元素正确高度的javascript方法。

在这里，我给你链接和支持确认。事实上，我在一个项目中使用了它，我需要根据元素高度来控制动画。

我希望它能帮助到和我处境相同的人。

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

使用getBoundingClientRect并访问高度属性，如下所示：

element.getBoundingClientRect（）.height

相关文章：