jQuery .height（）在Safari中错误 [英] jQuery .height() wrong in Safari

问题描述

在Safari中使用jQuery读取 DIV 的正确高度时出现问题。我使用 jQuery（＃x）。height（）来读出元素的高度。在实际情况下，我在页面中稍后使用结果。

I have a problem reading out the correct height of a DIV with jQuery in Safari. I am using jQuery("#x").height() to read out the height of the element. In the real situation, I use the result later on in the page. It works well in Chrome, Firefox and IE, but not in Safari.

这是我从我的页面提取的一些代码演示了问题：

Here is some code that I have extracted from my page that demonstrates the problem:

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

（一些参数看起来多余或奇怪，但我需要它们在我的上下文中，它不会改变问题，如果我离开他们）

(some parameters seem superfluous or strange, but I need them in my context and it doesn't change the problem if I leave them out)

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代码，我得到不同的结果取决于浏览器：

Now, with this jQuery code I am getting different results depending on the browser:

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

我把所有这些都放在一个代码中： http://codepen.io/anon/pen/MyELJV?editors=1111

I put all this into a codepen: http://codepen.io/anon/pen/MyELJV?editors=1111

如果你加载它在Firefox，控制台输出是469.如果你加载它在Safari，它的154.（另外：在Chrome / MacOS和IE11 / Win7的值是466）。一些小部分的区别是由于不同的默认样式，但主要的问题是，Safari不会考虑到图像时考虑到高度。

If you load it in Firefox, the console output is 469. If you load it in Safari, it's 154. (addition: in both Chrome/MacOS and in IE11/Win7 the value is 466). Some small part of the difference is due to different default styles, but the main problem is that Safari doesn't take the image into account when getting the height.

如果尝试不同的东西（没有解决问题）：

If tried different things (that didn't solve the problem):

• 我试过 innerHeight（）， outerHeight（）和 outerHeight（true） code> - 没有基本差异（略有不同的值，但仍然是Safari中的问题。）


• 我添加了 width = 330 heigth = 330 作为属性到 img 标签，它工作在codepen，但不是在我的真实情况（与另一个图像）。除此之外，整个事情都有反应，所以我想忽略这些属性。

• I tried innerHeight(), outerHeight() and outerHeight(true) instead of height() - no basic difference (slightly different values, but still the problem in Safari).
• I added width=330 heigth=330 as attributes to the img tag, it works in the codepen, but not in my real situation (with another image). Apart from that, the whole thing is responsive, so I'd like to omit these attributes anyway.

顺便说一句：图片都是330x330像素（即全部宽高比为1：1），但它们在较小的屏幕上缩小。

By the way: The original images are all 330x330px (i.e. all have aspect ratio 1:1), but they are scaled down on smaller screens.

我会非常感谢解决方案。 。

I'd be very grateful for a solution...

推荐答案

我改变了你的css，使safari不改变图像的高度。

I changed your css so that safari doesn't change height of image.

#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 的精确高度。

Also use load function to fetch exact height of #x.

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

您可以参考更改的代码此处。

You can refer the changed code here.

这篇关于jQuery .height（）在Safari中错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！