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

I'm keen to use inline-block extensively as part of a fluid, responsive design, rather than lots of float: left and clearfix hacks. Until HTML5/CSS3 provides a way of ignoring spaces, and everyone upgrades to browsers that support this new feature (i.e. maybe five years if we're lucky) there will always be problems making this kind of layout.

我热衷于使用内联块作为流畅的响应式设计的一部分,而不是大量的浮动:左和明确修复黑客。直到HTML5 / CSS3提供了一种忽略空间的方式,并且每个人都升级到支持这个新功能的浏览器(即如果我们幸运的话可能需要五年),制作这种布局总会出现问题。

There are a lot of hacks you can use to avoid the problem of browsers rendering space between inline-blocks: write code without spaces, comment out the spaces, some horrible font size hacks, etc. but None of them feel that great to me. I'm thinking instead of adding some inline JavaScript to the very bottom of my body tag:

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

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

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

Essentially a post-hoc implementation of the "write code without spaces" implementation. I've tested it on a range of browsers and they all seem pretty happy with it - my question is: is there some grave hidden danger that I'm not seeing?

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

I've created a demo here: http://jsfiddle.net/edwardc/wdz5t/

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

Obviously there may be occasions when I actually want space - I can deal with those easily. And there might be issues with JavaScript bindings falling off - I'm pretty sure all my jQuery bindings will always attach after a script at the bottom of the body runs, and even if there's an issue, .on() should provide an easy fix.

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

2 个解决方案

#1

With regard to your question, there isn't any real downside to what you are attempting, save for the fact that your page will take longer to render — because the page will already have started being evaluated — plus it will depend on the speed and existence of JavaScript. One thing you could do to avoid doing things twice is to wrap your page content using nosript.

关于你的问题,你所尝试的内容并没有任何真正的缺点,除了你的页面需要更长的时间来呈现 - 因为页面已经开始被评估 - 加上它将取决于速度和存在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>

The above would mean non-js browsers would just get on rendering the page, and js-enabled browsers wouldn't render anything until executing the document.write.

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

I can't recommend the above however, or using display: inline-block for what you are trying to do...

我不能推荐上面的,或者使用display:inline-block来做你想做的事......

Basically because I don't find using floats much of a problem — that's probably because I do find browsers rendering unexpected whitespace a tad annoying — to me, rather than any of this trickery, it's far far easier and more stable and supported to do the following:

基本上是因为我没有发现使用浮动大部分问题 - 这可能是因为我发现浏览器渲染出意想不到的空白有点烦人 - 对我来说,而不是任何这种技巧,它更容易和更稳定并且支持做以下:

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

Where the css would be:

css的位置是:

.overflow-fix {
  overflow: hidden;
}

li {
  float: left;
}

Over my years of web development, I have only ever come across one situation where I needed to overflow content from within a float... it was only in that case that I needed to use the rather awkward "clear fix". I also seem to have avoided the need for centering any inline content, that might just have been luck however.

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

+1 to James Donnelly — as he indeed has given an exact and correct answer in keeping with inline-block. However, to me, it feels that anything which leads you to mess around with the markup layout, should be avoided until it is a last resort.

詹姆斯唐纳利+1,因为他确实给出了一个与内联块一致的准确和正确的答案。但是,对我而言,应该避免任何导致您使用标记布局的东西,直到它是最后的手段。

2 个解决方案

#1

更多相关文章

随机推荐