为什么内联元素空白与 javascript/jquery 混为一谈？答案

【问题标题】：why inline element whitespace's mess with javascript/jquery?为什么内联元素空白与 javascript/jquery 混为一谈？
【发布时间】：2012-02-24 13:00:48
【问题描述】：

澄清问题是为什么空白会导致 javascript 功能出现问题？

我今天遇到了这种情况，想知道是否有人可以解释一下。

button.click(function() {
    menu.show();
});

html

<span id="button">
  <img src="btn.png" />
</span>
<ul id="menu">
    //contents here
</ul>

好的，现在它在所有 Chrome、FF、O、IE9 中都可以正常工作，但在 IE8 中却不行

现在如果我这样做

<span id="button"><img src="btn.png" /></span>
<ul id="menu">
    //contents here
</ul>

IE8 已修复...如果我将其构造为，它也可以工作

<span id="button"><!-- nospace
--><img src="btn.png" /><!-- nospace
--></span>
<ul id="menu">
  //contents here
</ul>

所以我猜是空格搞砸了。我只是好奇为什么空白会与它混淆，或者我的结构中是否存在这些解决方案似乎可以解决的潜在问题。

有什么想法吗？

【问题讨论】：

您是否使用记事本或其他任何东西来编写 HTML？，您的文件是否编码为 ANSI / UTF-8？这一切都很重要。我建议您在jsfiddle.net 尝试它，如果它仍然无法在小提琴后工作，我们将更容易跟踪和解决问题。
到底是什么搞砸了？
我使用 eclipse.. utf-8.. 我只是说，当我以一种在跨度内没有任何类型的空格的方式构建它时，它可以工作，而当我没有不是。我很好奇我是否应该对空白感到良心，或者是否有其他可能导致这种情况的事情。
我有些怀疑，但我需要更多信息来确认。您是否使用 php include？如果使用，请尝试将页面（包含的所有页面）保存为 UTF-8 而不使用 BOM。
@Brodie 请创建一个jsFiddle 来说明问题。或者至少详细说明“DOESNTWORK”。我会帮忙，但我无法使用它，也不知道确切的问题是什么。

【解决方案1】：

它将空白视为一个文本节点，这会抛出级联。旧浏览器中有一堆空白错误，这些错误在后续版本中从未修复。以下是一些资源：

【讨论】：