HTML语法转XML适配问题：HTML正常运行但XML中失效

我之前在OUCampus项目里跟XML语法打交道时，也踩过类似的坑——HTML的松散语法到XML的严格规则，很容易出各种奇怪的渲染和脚本问题。咱们一步步来解决你的问题：

一、先修正HTML到XML的核心语法差异 #

XML是严格标记语言，很多HTML里能“蒙混过关”的写法在XML里会直接导致解析错误，这很可能是图片重叠的根源：

• 所有标签必须闭合：比如HTML里的<img>、<br>要改成<img />、<br />；成对标签（比如<div>、<p>）必须有对应的闭合标签，不能省略。
• 属性值必须用引号包裹：哪怕是数字值（比如<div width=100>要改成<div width="100">）。
• 特殊字符必须转义：比如JS或文本里的&、<、>要分别写成&、<、>，否则XML会把它们当作标记解析。
• 避免自定义未声明的标签：OUCampus的XML通常基于XHTML规范，不要用HTML5里的新标签（比如<article>）除非模板里已经声明了对应的DTD。

举个图片标签的修正例子：

<!-- 错误的HTML写法 -->
<img src="hero.jpg" alt="Hero image" width=800>

<!-- 正确的XML兼容写法 -->
<img src="hero.jpg" alt="Hero image" width="800" />

二、修复JavaScript循环失效的问题 #

XML会解析<script>标签内的内容，JS里的<、>等符号会被当作XML标记处理，直接破坏循环语法。解决方法是把JS代码放在CDATA块里：

• 给<script>标签明确指定type="text/javascript"属性。
• 用<![CDATA[ ... ]]>包裹所有JS代码，告诉XML解析器这部分是纯文本，不要解析标签。

循环代码的修正示例：

<script type="text/javascript">
<![CDATA[
// 修正后的循环
for (let i = 0; i < document.querySelectorAll('.gallery-img').length; i++) {
  // 你的循环逻辑，比如调整图片间距
  document.querySelectorAll('.gallery-img')[i].style.marginLeft = '20px';
}
]]>
</script>

另外要检查变量声明：如果你的循环用了未声明的i（比如for (i=0; ...)），在严格模式下可能会报错，建议加上let或var声明变量。

三、针对图片重叠的额外排查点 #

如果语法修正后图片还是重叠，可能是布局解析的问题：

• 检查图片的容器元素：XML解析错误可能导致DOM结构错乱（比如某个<div>没闭合，导致所有图片被包裹在同一个错误的容器里），可以用浏览器的开发者工具查看实际渲染的DOM结构。
• 确认CSS样式的兼容性：XML环境下（尤其是XHTML），CSS选择器的写法要严格，比如不要用[attr=value]这种未加引号的属性选择器，要写成[attr="value"]。
• 检查OUCampus的模板设置：有些模板会强制给XML元素添加命名空间（比如<xhtml:img>），如果你的代码里没有对应命名空间，会导致样式和脚本无法选中元素。

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