CSS 文本缩进在 IE7 上不起作用
这是示例页面： http://jsfiddle.net/p9Fbb/
基本上，当使用 text 时-indent 在图标上，Internet Explorer 7（兼容模式下的 IE9）会将元素移出屏幕，而不仅仅是文本。由于某种原因，这只发生在表格单元格中的某些情况下（我认为这是当元素单独存在于单元格中时）。
我该如何解决这个问题？或者是否有另一种方法可以在元素中使用文本内容但保持其不可见？
Here is the sample page: http://jsfiddle.net/p9Fbb/
Basically, when using text-indent on the icon, Internet Explorer 7 (IE9 in Compatibility Mode) moves the element off-screen, not just the text. For some reason, this only happens in certain circumstances in table cells (I think it's when the element is on its own in a cell).
How can I fix this? Or is there another way to use textual content in an element but keep it invisible?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
看来问题是你的跨度在文本缩进之后变成空（或者它的大小变成0（不确定）），因此它没有显示。将文本放在您的跨度周围，您会看到它仍然在那里。
请参阅此 jsFiddle 示例。
使用
display:block而不是display:inline-block。内联元素不太喜欢尺寸声明（宽度/高度），它们被制作为显示在某些内容中，根据其内容占用空间。It seems that the problem is that your span become empty (or it's size become 0 (not sure)) after the text-indent, ence it's not displayed. Put text around your span, you'll see it's still there.
see this jsFiddle for an example.
use
display:blockinstead ofdisplay:inline-block. Inline-element do not like size declaration much (width/height), they are made to be displayed inside something, taking room according to their content.