For an ASP.NET MVC application, consider the following code fragment, where GetDetails will return HTML markup:

<%using (Ajax.BeginForm("GetDetails", new AjaxOptions { UpdateTargetId = "result" })) { %>
  <input type="submit" />
<% } %>
<span id="result" />

This code works beautifully in Firefox and Chrome, but in IE (at least 7 and 8), it ends up chewing up parts of the master page, wreaking havoc on the layout of the rendered page. The problem is that the span tag is a void element (it only has a start tag). If you physically specify the span as a start and end tag, e.g. <span id="result"></span>, then the code will work fine in all 3 browsers.

I was tempted to blame IE, and I still sort of do, but at least they're handling the HTML spec properly. w3.org clearly specifies that the span tag is not allowed to be a void element (search within the page for "void element" to see the list of allowed void elements), and it's consistent on the span reference page. The reason I still sort of blame IE is:

1. Mozilla and Chrome understand that a void span element can be expanded in to start and end tags
2. A void span element works just fine if it's enclosed in another HTML element, e.g. <td><span id="result" /></td> will display the returned HTML just fine
3. When looking at the rendered page with IE Developer Tools, if a void span element is encountered in a content page, they go back to the master page and stuff the rest of the master page in the span. I guess they're free to implement malformed HTML anyway they like, but this just seems crazy.

The takeaway: All of this due to a missing end tag for a span. Ugh!