Consider the following snippet of HTML...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
/* Code blocks */
div.code {
white-space:pre-wrap;
display: table;
}
/* comment */
div.code span.comment {
white-space:pre-wrap;
}
</style>
</head>
<body>
<div class="code">
12345678
main()
{
int a;
<span class="comment">// Comment a1</span>
<span class="comment">// Comment a2</span>
int b; <span class="comment">// Comment b1</span>
<span class="comment">// Comment b2</span>
int c; <span class="comment">// Comment c1</span>
<span class="comment">// Comment c2</span>
}
12345678
</div>
</body>
</html>
Upon viewing this content in Firefox, it appears as expected...
12345678
main()
{
int a;
// Comment a1
// Comment a2
int b; // Comment b1
// Comment b2
int c; // Comment c1
// Comment c2
}
12345678
However, when displayed in MS Edge (or other Chrome-based browsers), the rendering is slightly off...
12345678
main()
{
int a;
// Comment a1// Comment a2
int b; // Comment b1// Comment b2
int c; // Comment c1// Comment c2
}
12345678
The issue here lies in how 'pre-wrap' behaves between consecutive <span> elements, even with a blank line separating them like between "Comment c1" and "Comment c2". Removing the CSS definition for span "comment" doesn't resolve the problem, and inserting a newline WITHIN but at the end of the text disrupts the layout in Firefox, which is not a viable solution. Any insights on what could be causing this discrepancy? Is it a browser bug or something else entirely?