title: IE 8 remove line break between nodes with JavaScript
body: <p>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 <a href="https://stackoverflow.com/questions/1539367/remove-whitespace-and-line-breaks-between-html-elements-using-jquery">this question</a>. 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 <code>outerHTML</code> and that a simple reset of the <code>outerHTML</code> did the trick - like so:</p>
  
  <pre><code>node.outerHTML = node.outerHTML
  </code></pre>
  
  <p>However this will reset the node intirely and therefore removing all events and other settings on the node, which isn't really any good.</p>
  
  <p>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.</p>
  
  <p>The HTML is more or less like this:</p>
  
  <pre><code>&lt;div class="items"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but it doesn't have to be <code>&lt;div&gt;</code> it should be able to handle any tag. The CSS is pretty simple and goes something like this:</p>
  
  <pre><code>.items { white-space: nowrap; }
  .items .item { display: inline-block; background: red; height: 150px; width: 180px; }
  </code></pre>
  
  <p>and IE (6-7(8)) style is like this:</p>
  
  <pre><code>.items .item { *display: inline; *zoom: 1; }
  </code></pre>
  
  <p>i know that it is possible to "remove" that space via CSS like this:</p>
  
  <pre><code>.items { word-spacing: -0.33em; letter-spacing: -0.33em; }
  .items .item { word-spacing: normal; letter-spacing: normal; }
  </code></pre>
  
  <p>but I find this to be an ugly hack that sometimes screw things up. So since I'm already manipulating the elements via JS, then I just hoped to remove the spaces via JS.</p>
  
  <p>A little preview of what i meen:</p>
  
  <p><a href="http://tokimon.dk/stackoverflow/display-inline-spacing.png" rel="nofollow noreferrer">No spacing should appear between the squares http://tokimon.dk/stackoverflow/display-inline-spacing.png</a></p>