1

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

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/

4

1 回答 1

0

我可以看到您在使用 MS Edge 旧版浏览器时遇到问题。

我用你的示例代码进行了测试，我可以最终产生问题。我试图找到这个问题的解决方案，但没有可用的解决方案。

作为一种解决方法，您可以尝试添加white-space: pre; 到.preview CSS 类并从 HTML 代码中删除br标记。它不会为您提供与其他浏览器完全相同的值，但它可以帮助最小化差异。

修改后的代码：

<!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 铬浏览器以避免此问题。

于 2020-08-17T06:31:30.090 回答