IE 8 使用 JavaScript 删除节点之间的换行符
好的，我有一个 HTML 节点列表，它们应该是内联的，它们之间没有间距。问题是，节点是从 CMS 写入的，因此会带有各种换行符和空格。因此，我使用
node.outerHTML = node.outerHTML
然而，这将完全重置节点并且因此删除节点上的所有事件和其他设置，这实际上没有任何好处。
所以我现在的问题是：有没有办法从节点 externalHTML 中删除该换行符而不重置节点？我尝试过使用缩放：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; }
IE (6-7(8)) 样式如下：
.items .item { *display: inline; *zoom: 1; }
我知道可以通过 CSS 来“删除”该空间，如下所示：
.items { word-spacing: -0.33em; letter-spacing: -0.33em; }
.items .item { word-spacing: normal; letter-spacing: normal; }
但我发现这是一个丑陋的黑客有时会把事情搞砸。既然我已经通过 JS 操作元素，那么我只是希望通过 JS 删除空格。
我的意思的一点预览：
方块之间不应出现间距 http://tokimon .dk/stackoverflow/display-inline-spacing.png
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 already manipulating the elements via JS, then I just hoped to remove the spaces via JS.
A little preview of what i meen:
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
听起来像是 IE 盒子模型问题。你的 HEAD 中有这个元标签吗？
Sounds like an IE box model problem. Do you have this meta tag in your HEAD?
从快速测试来看，您想要的可以用纯 CSS 来实现 - 只需让所有“项目”浮动：
更新的测试用例： http://jsfiddle.net/yahavbr/jBH5D/4/
From quick test, what you want can be achieved with pure CSS - just have all "items" float:
Updated test case: http://jsfiddle.net/yahavbr/jBH5D/4/