1

我热衷于将其inline-block广泛用作流畅、响应式设计的一部分，而不是大量使用float: leftclearfix hack。直到 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()也应该提供一个简单的修复。

4

2 回答 2

2

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

这是这篇 CSS-tricks 文章中的一个CodePen 示例，它显示了所有在实际操作中对您感觉不佳的方法。

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

于 2013-03-22T08:38:40.777 回答
1

关于您的问题，您正在尝试的内容没有任何真正的缺点，除了您的页面需要更长的时间来呈现 - 因为页面已经开始被评估 - 再加上它取决于速度和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. 然而，对我来说，感觉任何导致你弄乱标记布局的东西，都应该避免，直到它是最后的手段。

于 2013-03-22T10:00:51.380 回答