Question

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

你可以使用很多黑客来避免浏览器在内联块之间渲染空间的问题：编写没有空格的代码，注释空格，一些可怕的字体大小的黑客等等但是他们都不觉得很棒对我来说。我正在考虑而不是在body标记的最底部添加一些内联JavaScript：

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

本质上是“无空间编写代码”实现的后期实现。我已经在一系列浏览器上对它进行了测试，他们看起来都非常满意 - 我的问题是：是否存在一些我没有看到的严重隐患？

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

显然有时候我真的想要空间 - 我可以很容易地处理这些问题。 JavaScript绑定可能会出现问题 - 我很确定我的所有jQuery绑定都会在主体底部的脚本运行后始终附加，即使出现问题，.on()应该提供一个简单的固定。

Answer 1

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

以下是来自CodePen example的this CSS-tricks article，其中显示了所有感觉不错的方法。

你的JavaScript是一个很好的解决方案，通过外观（假设你不想支持IE7），但你也可能想要应用上述一些方法作为后退。

Answer 2

关于你的问题，你所尝试的内容并没有任何真正的缺点，除了你的页面需要更长的时间来呈现 - 因为页面已经开始被评估 - 加上它将取决于JavaScript的速度和存在。为避免两次做事，你可以采取的一件事是使用nosript包装页面内容。

<body>
<noscript id="base">
  <!-- rest of your content goes here //-->
</noscript>
<script>
  document.write(
    String(document.getElementById('base').innerHTML)
      /// IE annoyingly entity encodes noscript content, so reverse
      .replace(/&gt;/gi,'>')
      .replace(/&lt;/gi,'<')
      /// deploy your space removal however you like
      .replace(/\x3e\s+\x3c/g, '\x3e\x3c')
  );
</script>
</body>

上述意味着非js浏览器只会渲染页面，启用js的浏览器在执行document.write之前不会呈现任何内容。

我不能推荐上述内容，或者使用display: inline-block来做你想做的事情......

基本上因为我没有发现使用浮动大部分问题 - 这可能是因为我确实发现浏览器渲染出意想不到的空白有点烦人 - 对我而言，而不是任何这种诡计，它更容易，更稳定和支持做以下事情：

<ul class="overflow-fix">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

css在哪里：

.overflow-fix {
  overflow: hidden;
}

li {
  float: left;
}

在我多年的Web开发过程中，我只遇到过一种需要从浮点内溢出内容的情况......只是在这种情况下我才需要使用相当尴尬的“明确修复”。我似乎也避免了将任何内联内容集中在一起的需要，但这可能只是幸运。

+1詹姆斯唐纳利 - 因为他确实给出了与inline-block保持一致的准确答案。但是，对我而言，应该避免任何导致你弄乱标记布局的事情，直到它成为最后的手段。

JavaScript作为内联块去间距的强大黑客

2 个答案: