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中工作，但不在我的实际情况下（使用其他图像）。除此之外，整个过程都很敏感，所以无论如何我都想省略这些属性。

顺便说一下：原始图像都是330x330px（即所有图像都具有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。

Safari

1 个答案: