JavaScript 作为行内 block 去间距的强大 hack

Question

我热衷于将 inline-block 广泛用作流畅、响应式设计的一部分，而不是大量使用 float: left 和 clearfix hack。直到 HTML5/CSS3 提供了一种忽略空格的方法，并且每个人都升级到支持此新功能的浏览器(如果幸运的话，可能是五年)，这样的布局总是会出现问题。

有很多 hack 可以用来避免浏览器在行内 block 之间呈现空间的问题:编写没有空格的代码、注释掉空格、一些可怕的字体大小 hack 等。但没有一个感觉那么好大部头书。我在想，而不是在我的 body 标签的最底部添加一些内联 JavaScript:

document.getElementById('base').innerHTML = document.getElementById('base').innerHTML.replace(/\x3e\s+\x3c/g, '\x3e\x3c');


本质上是“编写没有空格的代码”实现的事后实现。我已经在一系列浏览器上对其进行了测试，它们似乎都对它很满意 - 我的问题是:是否存在一些我没有看到的严重隐患？

我在这里创建了一个演示:http://jsfiddle.net/edwardc/wdz5t/

显然，有时我确实需要空间 - 我可以轻松应对。 JavaScript 绑定(bind)可能会出现问题 - 我很确定我所有的 jQuery 绑定(bind)都会在正文底部的脚本运行后始终附加，即使有问题，.on() 应该提供一个简单的修复。

Answer 1

您在帖子中提到的纯 HTML/CSS 方法工作正常，无需您网站的用户启用脚本。

这是一个CodePen example来自 this CSS-tricks article它显示了所有感觉不佳的方法。

从外观上看，您的 JavaScript 是一个足够好的解决方案(前提是您不想支持 IE7)，但您可能还想应用上述一些方法作为后备。