I ran into an odd bug with JQuery/IE/XSLT recently that might help some of you out.

The problem had to do with JQuery selectors. $(”.tag”) worked in FF 3, but didn’t work at all in IE 7. The HTML and Javascript were being loaded asynchronously via Ajax, so I fiddled around with $.getScript(), callback functions, setTimeout(), etc. to try to give IE time to “find” the tags that I wanted to work with. Nothing worked.

It turns out that the problem was the generated HTML that was being returned from the Ajax call. I was using an XSLT stylesheet to transform some data and had a little section like this:

<xsl:element name="div">
<xsl:attribute name="class">
tag
</xsl:attribute>
<xsl:attribute name="foo">
<xsl:value-of select="id"/>
</xsl:attribute>
<xsl:element name="a">
<xsl:attribute name="href">
void(0)
</xsl:attribute>
<xsl:value-of select="value"/>
</xsl:element>
</xsl:element>

What was happening was that the XSLT processor (ASP.NET’s XslCompiledTransform, if you’re interested) was spitting out a bunch of whitespace and encoded newlines, which I can’t get WordPress to format correctly or else I’d show you the output.

Firefox could wade through this nonsense to strip out the irrelevant whitespace and carriage returns. IE 7 couldn’t. Fixing up my XSLT to not indent my code for readability (gah) fixed it on IE as well.