1

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

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

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

额外的问题：与文本缩进相比，HTML5 样板技术有什么好处？

4

1 回答 1

2

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

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

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

话虽如此，我不能 100% 确定您要在代码中实现什么。我在这个小提琴中稍微重构了 html 。

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

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

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

于 2013-03-11T11:09:56.953 回答