Side navigation
#1587 closed bug (worksforme)
Opened September 11, 2007 04:33PM UTC
Closed September 15, 2007 03:02AM UTC
Last modified August 03, 2012 08:26AM UTC
Creating inline element without closing tag in IE fails
| Reported by: | jesse | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | 1.2.1 |
| Component: | core | Version: | 1.2 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
If you try to create an inline element by using $('<span>') without including the closing tag like $('<span></span>'), it won't work in Internet Explorer. There is no problem with block-level elements.
I have set up a demo showing that it is broken with <span> and <b> but not <div>:
http://www.thefutureoftheweb.com/demo/2007-09-11-jquery-inline-ie/
It was working in 1.1.2 but broke in 1.1.4. It remains broken in 1.2.
Attachments (0)
Change History (5)
Changed September 11, 2007 04:59PM UTC by comment:1
Changed September 11, 2007 05:16PM UTC by comment:2
It seems wrapping with a table instead of a <div> might be okay. So instead of:
jQuery.browser.msie &&
[1, "div<div>", "</div>"] ||
it would be:
jQuery.browser.msie &&
[4, "<table><tbody><tr><td>", "</td></tr></tbody></table>"] ||
Not sure if this causes other issues with links and scripts or whatnot...
Changed September 11, 2007 05:20PM UTC by comment:3
jesse, jQuery is designed to accept valid html.
Try $('<span/>'), it works in IE as well as other browsers.
Changed September 15, 2007 03:02AM UTC by comment:4
| resolution: | → worksforme |
|---|---|
| status: | new → closed |
| version: | 1.1.4 → 1.2 |
Jesse - Arrix is correct, you need to use valid HTML/XHTML - otherwise issues will occur. It happened to work previously, by chance, for some tags - but fails for others. The current solution works for all tags, in all browsers.
Changed August 03, 2012 08:26AM UTC by comment:5
Just posting an update about this issue, and provide a test case.
This issue occur when trying to create an INLINE element WITH attributes. Without attributes, it works great.
Using self-closing (slash) tag as mentioned in this ticket solve the issue too.
Some more info..
alert($('<span>').length); // alerts 0 in IE
I've traced it down to jQuery.clean, which wraps the <span> with the following:
div<div><span></div>
which IE interprets as:
div<DIV><SPAN></DIV></SPAN>
and when div.lastChild is thus <SPAN> which has no children.
I recommend either checking for this scenario and fixing it (like is done with XHTML-style tag), or finding some magical workaround which forces IE to add the closing tag in the right place.
Or maybe the div<div></div> is only used when <link> or <script> tags are present?