IE 8 Zeilenumbruch zwischen Knoten mit JavaScript entfernen

Question

Ok ich habe eine Liste von HTML-Knoten, die inline sein sollte, ohne Abstand zwischen ihnen. Das Problem ist, dass die Knoten aus einem CMS stammen und daher mit allen möglichen Zeilenumbrüchen und Leerzeichen kommen. Daher entferne ich die Leerzeichen mit JS mit der in this question beschriebenen Methode. Das Problem ist jedoch, dass in IE (nicht 9) die Leerstellen nicht Teil der Kinderliste des Elternknotens sind, was die Methode in IE unbrauchbar macht. IE 7 (oder zumindest IE 9, der IE 7 emuliert) ignoriert jedoch die Zeilenumbrüche, so dass man im Klartext ist. Damit bleibt IE 8 der Unruhestifter. Ich entdeckte, dass der Zeilenumbruch ist eigentlich ein Teil des outerHTML und dass ein einfaches Reset des outerHTML der Trick - wie so:

node.outerHTML = node.outerHTML 

Dies wird jedoch den Knoten zurückgesetzt intirely und damit alle Ereignisse und andere Einstellungen zu entfernen auf dem Knoten, was nicht wirklich gut ist.

Also meine Frage ist jetzt: Gibt es eine Möglichkeit, diese Zeilenumbruch von den Knoten OuterHTML ohne Zurücksetzen des Knotens zu entfernen? Ich habe es mit Zoom versucht: 1, aber ohne Erfolg. Hoffe, dass irgendjemand irgendwelche Erfahrung damit hat.

Die HTML ist mehr oder weniger wie folgt aus:

<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> 

aber es muss <div> nicht sein sollte jegliche Tag zu handhaben können. Die CSS ist ziemlich einfach und geht in etwa so:

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

und IE (6-7 (8)) Stil ist wie folgt:

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

ich weiß, dass es möglich ist, zu "entfernen" Dieser Platz über CSS wie folgt:

aber ich finde dies ein hässlicher Hack, der manchmal Dinge vermasselt. Da ich die Elemente bereits über JS manipuliere, habe ich nur gehofft, die Leerzeichen über JS zu entfernen.

Eine kleine Vorschau von dem, was ich meen:

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

Answer 1

Klingt wie ein Box-Modell Problem IE. Hast du dieses Meta-Tag in deinem HEAD?

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

Answer 2

Von schnellen Test, was Sie wollen, können mit reinem CSS erreicht werden - haben nur alle "Elemente" float:

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

Aktualisiert Testfall: http://jsfiddle.net/yahavbr/jBH5D/4/