html - 使用 jQuery 在 IE Edge 中获取元素 outerHeight 的问题
问题描述
我在预览中有几个元素<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 进行比较
解决方案
我可以看到您在使用 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 铬浏览器以避免此问题。
推荐阅读
- java - 通知栏架构中的音乐播放器
- java - 共享使用时的 java.util.Random.nextX 分布
- reactjs - ReactJS 中的克隆元素
- python - 闰年检查器未通过未知测试用例
- python - 为什么ndarray打印不一致?
- php - 查询未执行 Uncaught PDOException: SQLSTATE[HY093]: Invalid parameter number: 绑定变量数与标记数不匹配
- c++ - 如何优雅地将长类型名称传递给模板参数?
- angular - 如何绑定角度动态形式?
- amazon-ec2 - Terraform & Ansible 控制器和私钥分发
- javascript - kotlin/javascript 或 kotlin/native 中的 MutableMap 是 LinkedHashMap 吗?