CSS文本缩进不适用于IE7

Question

这里是示例页面：http://jsfiddle.net/p9Fbb/

基本上，当在图标上使用text-indent 时，Internet Explorer 7（兼容模式下的 IE9）会将元素移出屏幕，而不仅仅是文本。出于某种原因，这仅在表格单元格中的某些情况下发生（我认为这是当元素在单元格中单独存在时）。

我该如何解决这个问题？还是有另一种方法可以在元素中使用文本内容但使其不可见？

Answer 1

似乎问题在于您的跨度在文本缩进之后变为 empty（或者它的大小变为 0 （不确定）），因此它没有显示。将文本放在您的跨度周围，您会看到它仍然存在。

请参阅此jsFiddle 以获取示例。

使用display:block 而不是display:inline-block。内联元素不太喜欢尺寸声明（宽度/高度），它们被制作为显示在某物内部，根据它们的内容占用空间。