Html 使用jQuery在IE边缘中获取元素时遇到的问题_Html_Jquery_Microsoft Edge_Outerheight

Html 使用jQuery在IE边缘中获取元素时遇到的问题

html jquery

Html 使用jQuery在IE边缘中获取元素时遇到的问题,html,jquery,microsoft-edge,outerheight,Html,Jquery,Microsoft Edge,Outerheight,我在预览版中有几个元素。我需要加上他们的户外高度（而不是预览的总高度）。如果元素的高度达到例如300px，我需要触发一些动作 Firefox和Chrome都做得很好。IE Edge似乎为每个元素添加了额外的线条高度。我发现这是因为每个元素末尾都有标记。似乎它们在Edge中被处理为一行额外的文本比较photoshop中的框高度，我可以看出Firefox和Chrome是正确的。边缘的总高度比可见的要高得多我无法操作预览中的变量文本。有人知道如何使用jquery或javascript修复它吗我的

我在预览版中有几个元素。我需要加上他们的

户外高度

（而不是预览的总高度）。如果元素的高度达到例如300px，我需要触发一些动作

Firefox和Chrome都做得很好。IE Edge似乎为每个元素添加了额外的线条高度。我发现这是因为每个元素末尾都有

标记。似乎它们在Edge中被处理为一行额外的文本

比较photoshop中的框高度，我可以看出Firefox和Chrome是正确的。边缘的总高度比可见的要高得多

我无法操作预览中的变量文本

。有人知道如何使用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">

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

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

我用你的示例代码做了一个测试，我可以在我这方面提出问题。我试图找到这个问题的解决方案，但是没有解决这个问题的方案

作为一种解决方法，您可以尝试添加空白：pre到.previewCSS类，并从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>


.预览{行高：14px；字体大小：12px；边框：1px实心#c00；空白：pre；}
$（文档）.ready（函数（）{
var-ct=0；
$（'.preview'）.children（）.each（function（））{
控制台日志（ct）；
log（$（this.outerHeight（true））；
ct=ct+$（此）.outerHeight（真）；
});
$（'t'）.val（ct+“px-总高度”）；
});
计算红色边框div内元素的高度
乱数假文，
益智
我的心坐在那里。我的心坐在那里。我的心坐在那里。我的心坐在那里。
益智

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

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

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