Quarto嵌入HTML渲染额外空白Tile问题求助

1. HTML标签未正确闭合 #

如果你的title容器标签（比如<div class="title">...</div>）存在未闭合的情况，Quarto站点的渲染引擎（依赖Pandoc）在处理时会自动尝试补全标签，但补全逻辑可能错误地将最后一个Tile的<a>标签范围延伸到后续的空白节点，从而生成一个绑定了相同URL的空白可点击区域。而本地浏览器对不规范HTML的容错性更强，能正确识别标签边界，因此不会出现额外Tile。

2. Quarto站点模板的选择器干扰 #

Quarto站点生成时会套用主题模板，模板中的CSS或JavaScript可能使用了特定的选择器（比如.tile-list > a）来批量处理Tile元素。当你插入title容器后，DOM结构发生变化，模板的选择器可能误将title容器后的空白文本节点（比如换行、空格）识别为Tile列表的子元素，并为其绑定了最后一个Tile的URL。本地直接打开HTML时没有加载站点模板的额外样式和脚本，因此不会触发这个问题。

3. Pandoc渲染的AST解析差异 #

Quarto通过Pandoc将.qmd转换为HTML，本地打开的是Pandoc输出的原始HTML；而站点生成过程中，Quarto会对Pandoc的输出进行二次优化（比如压缩DOM、合并节点）。如果title容器的插入位置导致Pandoc的抽象语法树（AST）解析出现异常，生成了多余的链接节点，站点优化阶段未能剔除这个节点，就会出现空白Tile。本地浏览器渲染原始HTML时会忽略这类无效节点，因此表现正常。

内容的提问来源于stack exchange，提问作者afro_omics