I am seeing an odd issue on chrome calculating the height of a span that I finally narrowed down to an embedded <hr> tag in my <span> container (other tags like DIV have similar results).
Below code exposes this issue. Try the test with and without the embedded <hr> tag and you will see the height calculation fails with the <hr> tag. In fact it only gives the height up to the <hr> tag. So if you move the <hr> tag after some of the LINEn strings, those lines before the tag will be included in the calculation.
Does anyone know if this is a known issue or does someone have an explanation why it fails on Chrome and Edge? Or possibly an error in my code?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$("button").click(function(){
dh = $("div").height();
sh = $("#forum_tile_span").height();
forum_tile_span_offsetHeight = document.getElementById("forum_tile_span").offsetHeight;
alert("dh: " + dh + " sh!: " + sh + " forum_tile_span_offsetHeight!: " + forum_tile_span_offsetHeight);
});
});
</script>
</head>
<body>
<p>
Press the button to get the size of the span tag. <br>
1. Test WITHOUT <hr> tag at beginning of span container. <br>
RESULTS: Correct height on both Firefox & Chrome <br>
2. Test WITH <hr> tag at beginning of span container. <br>
RESULTS: Correct height on Firefox, but FAILS on Chrome <br>
<br>
Conclusion: It appears Chrome and Edge have issue calculating height of span if an <HR> tag is included. <br>
</p>
<div class="forum_tile" style="font-size: 50px;height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;">
<span id="forum_tile_span">
<!-- Place <hr> tag here for test#2 -->
<hr>
LINE1
LINE2
LINE3
LINE4
</span>
</div><br>
<button>Display the height of span</button>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
