如何让XSLT不自动闭合<source/>这类空标签？

问题出在哪 #

XSLT转HTML的时候，处理器会根据输出规则和元素的命名空间来决定标签格式。<source>是HTML5的空元素，但老版本的XSLT（比如1.0）可能没把它识别成自闭合元素，转完就多出个</source>，导致W3C校验报错。之前你移除xmlns="http://www.w3.org/1999/xhtml"解决了<input>的问题，但<source>没被识别成HTML元素，所以还是出问题。

怎么解决 #

1. 配置正确的输出规则 #

用method="html"而不是xhtml，同时指定HTML5版本，这样处理器会按HTML规则处理空元素，不会乱加结束标签。输出配置这么写：

<xsl:output 
  method="html" 
  version="5.0" 
  indent="yes"
  doctype-system="about:legacy-compat" />

doctype-system="about:legacy-compat"是HTML5的标准DOCTYPE，能避免页面触发怪异模式，不会搞乱布局。

2. 把HTML元素放回XHTML命名空间 #

重新在XSLT样式根节点加xmlns="http://www.w3.org/1999/xhtml"，让所有输出的HTML元素都归到这个命名空间下：

<xsl:stylesheet 
  version="1.0" 
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns="http://www.w3.org/1999/xhtml">

这样处理器就能认出<source>是HTML的空元素，保持自闭合格式。

3. 老处理器兼容方案（比如Xalan） #

如果你的XSLT处理器太老，不认HTML5的空元素，那就写个专门的模板强制输出自闭合<source>：

<xsl:template match="source">
  <xsl:text disable-output-escaping="yes">&lt;source</xsl:text>
  <xsl:for-each select="@*">
    <xsl:text> </xsl:text>
    <xsl:value-of select="name()"/>
    <xsl:text>&quot;</xsl:text>
    <xsl:value-of select="."/>
    <xsl:text>&quot;</xsl:text>
  </xsl:for-each>
  <xsl:text>/&gt;</xsl:text>
</xsl:template>

这个模板直接输出原始的自闭合标签，绕过处理器的自动闭合逻辑。

改完后的效果 #

处理你提供的<picture>代码后，输出应该是这样的：

<picture>
  <source media="(min-width:768px)" srcset="{$template-resources}images/banner.png"/>
  <source media="(min-width:420px)" srcset="{$template-resources}images/banner768.png"/>
  <img src="{$template-resources}images/banner420.png" style="width:auto;" alt="Скидка 20% на книги в печати" itemprop="contentUrl"/>
</picture>

这时候W3C校验就不会再报<source>的结束标签错误了。

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