jQuery's html() function removes tabs in IE 8 when it shouldn't

[tim@…]

See jsFiddle here:

​http://jsfiddle.net/6Hd9J/5/

Notice that in setting the HTML of somediv using the html() function, there are four tabs. In the latest Chrome, Safari, and Firefox, these tabs remain: i.e, there is a tab character at the beginning of each line. However, in Internet Explorer 8, all tab characters following the first are removed.

Note that I'm setting the HTML from the server that has characters saved in the data. This is for a contenteditable div used for rich text editing within my application.

[anonymous]

That last part should say: *tab* characters saved in the data.

[john]

I think the issue is that you're conflating HTML (where whitespace tends to be insignificant) and text/pre - where you should probably be using .text("your text") instead. You should just convert the <br>s to \n and you'll be good to go!

[tim@…]

Why would this work correctly (correctly being that the tab is preserved) in every other browser but IE?

I can't use text() because I'm pulling HTML across the wire so it can be placed into a contenteditable div (think, text editor). To work around this, I need to add a <tab> html tag before the html() command, then replace all <tab> tags with the actual tab character. In javascript, the data flows like this:

Get data from server, with tab character -> convert to <tab> -> use html() -> convert <tab> back to tab character.

This seems like the perfect place for jQuery.