在 chrome 和 ie 中添加空间以锚文本的问题（可能是文本缩进？）答案

【问题标题】：problem with adding space to anchor text in chrome and ie(probably text-indent?)在 chrome 和 ie 中添加空间以锚文本的问题（可能是文本缩进？）
【发布时间】：2011-04-06 21:47:44
【问题描述】：

我有一个包含多个 css 类的元素，它是这样的：

 <a href="asdad" class="icon make-default ss_sprite ss_bullet_white">Make Default</a>

chrome 和 ie 显示如下：http://grab.by/9OXe

而 Firefox 显示它是这样的：http://grab.by/9OXs

请注意，我在打开 firebug 时为您突出显示了 a 元素（这就是所有样式）

我更喜欢 jsfiddle 的屏幕截图（因为我通常会评论人们），因为屏幕显示了我想知道的内容：为什么 chrome 和 ie 以不同的方式显示锚块。我知道浏览器不会呈现相同的东西（尤其是 ie vs webkit，但对于 chrome 和 ie 来说同意是不寻常的），我有一个 reset.css（960 的重置）

我有什么遗漏吗？我有一个为图标类添加宽度的解决方案，但我想知道为什么我需要这样做。

更新

在写这个问题时，我有机会将 a 更改为：

 <a href="asdad" class="icon make-default ss_sprite ss_bullet_white">Default</a>

因为如果你能看到那里的黑色子弹，它使用的是相同的类并且它已被修复。现在的问题是 ANYTHING WITH SPACES 作为锚文本会破坏 IE 和 chrome 中的东西。任何解释为什么？

（此外，我的代码正在优雅地降级，因此即使没有样式，它也应该显示 Make Default 文本（我知道我没有通过使用负缩进技巧来显示它，但在没有 CSS 的情况下，它应该显示制作默认文本，所以我不打算尽可能更改它）

【问题讨论】：

你需要展示更多的 CSS；元素受其周围元素及其父元素的样式影响。
正如我上面所说，似乎问题出在文本缩进或在 Firefox 中没有给锚标记任何宽度的东西（因此使它看起来固定），而在 chrome 中给它 41px

标签： css internet-explorer firefox google-chrome

【解决方案1】：

考虑到您的更新，

您是否尝试过 white-space:nowrap; 或不使用空格，而是使用非中断空格 &nbsp; ？

当然，解决问题的现场小提琴或更多 html/css 可以帮助我们更好地解决问题。

【讨论】：