使用jQuery在IE Edge中获取元素externalHeight的问题

问题描述

我在预览<div>中有几个元素。我需要将它们的outerHeights加起来（而不是预览<div>的总高度）。如果元素的高度达到例如300px，我需要触发一些操作。

Firefox和Chrome表现出色。 IE Edge似乎为每个元素添加了额外的行高。我发现这是由于每个元素末尾的<br />标签所致。似乎它们在Edge中作为附加文本行处理。

比较photoshop中的盒子高度，我可以看到Firefox和Chrome正确。边缘总计的高度要比可见的高得多。

我无法在预览<div>中操作变量文本。有谁知道如何使用jquery或javascript修复它？

我的html：

<div class="preview">
  <span>Lorem ipsum,<br/></span>
  <span><br/></span>
  <span>Lorem ipsum doilor sit amet <br/></span>
</div>

<input type="text" id="t" value="0">

我的jQuery：

var ct = 0;
$('.preview').children().each(function() {
    ct = ct+$(this).outerHeight(true);     // 'true' for including margins
});
$('#t').val(ct+"px - total height");

请看看我在Chrome / firefox中的小提琴，并与IE Edge进行比较

https://jsfiddle.net/e3adkvmq/3/

解决方法

我可以看到您的MS Edge旧版浏览器存在问题。

我用您的示例代码进行了测试，最终可以产生问题。我试图找到解决此问题的方法，但是没有解决此问题的方法。

作为一种解决方法，您可以尝试在 .preview CSS类中添加空白：pre; ，并删除 br 标签来自HTML代码。它不会为您提供与其他浏览器完全相同的价值，但可以最大程度地减少差异。

修改后的代码：

<!doctype html>
<html>
<head>
<style>
.preview { line-height: 14px; font-size: 12px; border: 1px solid #c00;white-space: pre; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var ct = 0;
$('.preview').children().each(function() {
    console.log(ct);
    console.log($(this).outerHeight(true));
    ct = ct+$(this).outerHeight(true);
});

$('#t').val(ct+"px - total height");
});
</script>
</head>
<body>
<h4>Counting up height of Elements inside red bordered div</h4>

<div class="preview">
  <span class="intro-breaker">Lorem ipsum,</span>
  <span class="intro-breaker"></span>
  <span class="intro-breaker">Lorem ipsum doilor sit amet</span>
  <span class="intro-breaker">Lorem ipsum sit amet dolores eunt sunt. Lorem ipsum sit amet dolores eunt sunt. Lorem ipsum sit amet dolores eunt sunt. Lorem ipsum sit amet dolores eunt sunt.</span>
  <span class="intro-breaker"></span>
  <span class="intro-breaker">Lorem ipsum doilor sit amet</span>
</div>

<input type="text" id="t" value="0">
</body>
</html>

在MS Edge旧版浏览器中的输出：

您可以尝试在MS Edge旧版浏览器中按ALT + J键，然后尝试将有关此问题的反馈提供给Microsoft。

正如其他社区成员已经通知您的那样，您可以建议您的客户升级到新的MS Edge铬浏览器，以避免出现此问题。

html jquery microsoft-edge