IE 8使用JavaScript删除节点之间的换行符

好的，我有一个HTML节点列表，这些节点应该是内联的，它们之间没有间距。问题是，节点是从CMS写入的，因此会出现各种换行符和空格。因此，我使用中描述的方法删除带有JS的空格。然而，问题是，在IE（不是9）中，空格不是父节点的子节点列表的一部分，使得该方法在IE中无用。然而，IE 7（或至少是模拟IE 7的IE 9）忽略了换行符，因此其中一个是空白的。这使得IE 8成了麻烦制造者。我发现换行符实际上是

outerHTML

的一部分，而

outerHTML

的简单重置就是这样做的：

node.outerHTML = node.outerHTML

但是，这将在内部重置节点，从而删除节点上的所有事件和其他设置，这实际上并不好

所以我现在的问题是：有没有一种方法可以在不重置节点的情况下从节点outerHTML中删除该换行符？我尝试过zoom:1，但没有效果。希望任何人都有这方面的经验

HTML大致如下所示：

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

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

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

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

IE（6-7（8））的风格是这样的：

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

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

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

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

我知道可以通过CSS“删除”该空间，如下所示：

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

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

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

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

但我发现这是一个丑陋的黑客，有时会把事情搞砸。既然我已经在通过JS操作元素，那么我只希望通过JS删除空格

我所遇到的一点预览：

---

听起来像是IE盒子模型的问题。你脑子里有这个元标签吗

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

---

通过快速测试，您可以使用纯CSS实现所需功能-只需将所有“项”浮动即可：

---

更新的测试用例：

@Tokimon您可以发布CMS抛出的示例HTML吗？可以将其用作测试用例。：）我添加了HTML，但由于它还没有在CMS中实现，HTML非常简单。@Tokimon-等等。。你是说删除换行符还是删除空元素？这两者之间有很大的区别。@Tokimon这是你想要的吗？我需要删除内联元素之间的间距，当这些元素在HTML中没有内联时会出现这种间距。所以不。。。不是空元素，只是标记之间的空格/制表符/换行符。我希望它只是空元素，因为这很容易。对不起。我在这一部分已经有了。这似乎是一个普遍的IE问题，但我真的不知道为什么在IE 6+7中消除了空格。为了记录在案，我使用HTML5 doctype。是的，我知道。。。但是，我必须为容器指定一个宽度，以防止项目相互包裹，这是我希望避免的。@Tokimon如果您想要相对或类似的宽度，您可以使用客户端代码根据当前文档宽度轻松设置宽度。我知道。。但是，每次添加或删除节点时，我都必须重新计算宽度。有点糟糕，而且消耗资源：）