如何使用带有内联元素的 HTML5 Boilerplate ir 类？

Question

我正在使用 HTML5 样板 css，我想将 ir 类应用于我的页脚菜单。 菜单在一个列表中，我使用 inline-block 水平显示这个列表。

这里是the fiddle 的代码。您可以看到图像替换有效，但之后的文本菜单元素（没有图像）被翻译到底部。这是由于.ir:before css 规则模拟了占用一些空间的块元素。

有没有办法在没有这种副作用的情况下使用 HTML5 Boilerplate 技术？ 如果没有，我会回到text-indent:-9999px 技术。

额外问题：与文本缩进相比，HTML5 样板技术有哪些优势？

Answer 1

text-indent: -9999px 方法有一些缺点。主要有：

• 在 IE6 和 IE7 中对 inline-block 元素不起作用。
• 第一代。事实证明，iPad 在使用这种技术时会出现性能问题，页面渲染速度会慢很多。
• 即使我们看不到它，任何设备中的任何浏览器都必须绘制一个溢出屏幕的巨大 div（超过 9999 像素）。这对性能不好，因为它会增加页面加载时间并需要更多内存资源。

HTML5 Boilerplate 中的.ir 技术已被证明具有更高的性能和可靠性。你做对了。

话虽如此，但我不能 100% 确定您要在代码中实现什么。我在 fiddle 中对 html 进行了一些重构。

如您所见，我设置了红色边框以了解元素的确切位置以及它们占用的空间。每个图像/文本现在都有自己的<li>，这是语义逻辑（一个链接/一个列表项），如下所示：

 <ul>
     <li>facebook<li>
     <li>twitter</li>
     <li>example page</li>
 <ul>

我还将float:left 删除到导航中，因为您需要浮动其中的元素，而不是容器本身。希望这可以清除它并帮助您到达您想要的地方。如果需要任何改进或者我误解了您想要实现的目标，我已准备好编辑此答案。