如何使用HTML5 Boilerplate ir类与内联元素？ [英] How to use the HTML5 Boilerplate ir class with inline elements?

问题描述

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

I'm using HTML5 Boilerplate css and I would like to apply the ir class to my footer menu. The menu is in a list, and I use inline-block to display this list horizontally.

这里是代码的小提示。您可以看到图像替换工作，但文本菜单元素之后（没有图像）被翻译到底部。这是由于 .ir：before css规则模拟需要一些空间的块元素。

Here is the fiddle of the code. You can see that the image replacement works, but the text menu element after (that has no image) is translated to the bottom. This is due to the .ir:before css rule that simulate a block element which takes some room.

有没有这种副作用的方式使用HTML5 Boilerplate技术？
如果没有，我会回到 text-indent：-9999px 技巧。

Is there a way to use the HTML5 Boilerplate technique without this side-effect ? If not, I will go back to the text-indent:-9999px technique.

问题：与文本缩进相比，HTML5 Boilerplate技术的优点是什么？

Bonus question : what are the benefits of the HTML5 Boilerplate technique compared to the text-indent one ?

推荐答案

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

The text-indent: -9999px method has some drawbacks. The main are:

• 在inline-block元素的IE6和IE7中不起作用。


• 第一代。 iPad已经证明在使用这种技术时会出现性能问题，页面渲染速度会有所下降。


• 即使我们没有看到它，任何设备上的任何浏览器都必须绘制一个巨大的div（大于9999px）溢出屏幕。

<$>

说到这里，我不是100％肯定你想在代码中实现。我在此小提琴中重新编排了一些html。

Having said that, I'm not 100% sure of what you're trying to achieve in your code. I have restructered the html a bit in this fiddle.

正如你看到的，我已经把红色的边框，以了解元素在哪里和他们占用了多少空间。每个图像/文本现在在它自己的< li> 中，其语义逻辑（一个链接/一个列表项），如下：

As you can see I have put red borders to understand where exactly elements are and how much space they take up. Every image/text is now in its own <li> which is semantically logic (one link/one list item), like so:

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

我也删除了 float：left 到nav，当你需要浮动其中的元素，而不是容器本身。希望这个清除它一点，并帮助你到你想要的地方。如果需要改进，或者我误解了您要达到的目标，我准备好编辑此答案。

I've also removed the float:left to the nav as you need to float the elements inside it, not the container itself. Hope this clears it up a bit and helps you get to where you want. I'm ready to edit this answer if any improvement is needed or if I have misunderstood what you're trying to achieve.

这篇关于如何使用HTML5 Boilerplate ir类与内联元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！