下面是一个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>当我在Firefox中显示它时，我得到...
12345678
main()
{
int a;
// Comment a1
// Comment a2
int b; // Comment b1
// Comment b2
int c; // Comment c1
// Comment c2
}
12345678……这正是我所期望的。
然而，在MS Edge（和其他基于Chrome的浏览器）中，我得到了这个。
12345678
main()
{
int a;
// Comment a1// Comment a2
int b; // Comment b1// Comment b2
int c; // Comment c1// Comment c2
}
12345678正如你所看到的，“pre-wrap”在连续的元素之间是不被尊重的，即使它们之间有一个空行（就像“注解c1”和“注解c2”之间的情况一样）。如果我删除span“注解”的css定义，问题仍然存在。如果我在文本的末尾嵌入一个换行符，那么这是被尊重的，但会搞乱Firefox，我觉得这不是解决办法
有谁能告诉我我哪里做错了吗？或者这是Chrome的bug？或者其他什么？
1条答案
按热度按时间myss37ts1#
希望这会奏效：注解css**/* 显示：table;*/**.这将影响输出：