IE 8 remove line break between nodes with JavaScript

Ok i have a list of HTML nodes which should be inline with no spacing between them. The problem is, that the nodes are written from a CMS and therefore will come with all sorts of linebreaks and spaces. Therefore I'm removing the spaces with JS using the method descibed in this question. The problem is, however, that in IE (not 9) the white spaces isn't part of the childrens list of the parent node, rendering the method useless in IE. However IE 7 (or at least IE 9 emulating IE 7) ignores the linebreaks, so that one is in the clear. That leaves IE 8 as the troublemaker. I discovered that the line break is actually a part of the outerHTML and that a simple reset of the outerHTML did the trick - like so:

node.outerHTML = node.outerHTML

However this will reset the node intirely and therefore removing all events and other settings on the node, which isn't really any good.

So my question is now: Is there a way to remove that linebreak from the nodes outerHTML whitout resetting the node? I've tried with zoom: 1, but to no avail. Hope anyone has any experience with this.

The HTML is more or less like this:

<div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

but it doesn't have to be <div> it should be able to handle any tag. The CSS is pretty simple and goes something like this:

.items { white-space: nowrap; }
.items .item { display: inline-block; background: red; height: 150px; width: 180px; }

and IE (6-7(8)) style is like this:

.items .item { *display: inline; *zoom: 1; }

i know that it is possible to "remove" that space via CSS like this:

.items { word-spacing: -0.33em; letter-spacing: -0.33em; }
.items .item { word-spacing: normal; letter-spacing: normal; }

but I find this to be an ugly hack that sometimes screw things up. So since I'm a开发者_如何学Clready manipulating the elements via JS, then I just hoped to remove the spaces via JS.

A little preview of what i meen:

No spacing should appear between the squares http://tokimon.dk/stackoverflow/display-inline-spacing.png

Sounds like an IE box model problem. Do you have this meta tag in your HEAD?

<meta http-equiv="X-UA-Compatible" content="IE=8" />

From quick test, what you want can be achieved with pure CSS - just have all "items" float:

.items .item { float: left; background: red; }

Updated test case: http://jsfiddle.net/yahavbr/jBH5D/4/