Safari 中的 jQuery .height() 错误

Question

我在 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 标记中，它在codepen 中有效，但在我的实际情况中无效（使用另一张图片）。除此之外，整个事情都是响应式的，所以我还是想省略这些属性。

顺便说一句：原始图像都是 330x330 像素（即所有的宽高比都是 1:1），但它们在较小的屏幕上按比例缩小。

非常感谢您的解决方案...

Answer 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());  
});

您可以参考修改后的代码here。