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

Question

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

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

有没有办法使用 HTML5 样板技术而没有这种副作用？如果没有，我会回到 text-indent:-9999px 技术。

奖励问题:与文本缩进技术相比，HTML5 样板技术有哪些优势？

Answer 1

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

• 不适用于 IE6 和 IE7 的内联 block 元素。
• 第一代。事实证明，iPad 在使用此技术时存在性能问题，页面呈现速度会大大降低。
• 即使我们看不到它，任何设备中的任何浏览器都必须绘制一个溢出屏幕的巨大 div(超过 9999px)。这对性能不利，因为它会增加页面加载时间并需要更多内存资源。

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

话虽如此，我并不是 100% 确定您要在代码中实现的目标。我在这个 fiddle 中稍微重构了 html .

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

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

我还删除了 float:left到导航，因为您需要 float 其中的元素，而不是容器本身。希望这可以解决一些问题并帮助您到达所需的位置。如果需要任何改进或者我误解了您要实现的目标，我准备好编辑此答案。