CSS中负文本缩进的宽度问题答案

【问题标题】：Width issue with negative text indent in CSSCSS中负文本缩进的宽度问题
【发布时间】：2011-10-21 22:28:42
【问题描述】：

当我运行下面的代码时，我在屏幕上看到一个蓝色框。

<!DOCTYPE html>
<html dir="ltr">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <style type="text/css">
                a {display:block;background:blue; text-indent:-9999px; float:left;}
        </style>
    </head>

    <body>
        <a>Hello World</a>
    </body>
</html>

如果我把文字Hello World改成HelloWorld，蓝框就消失了？

附加说明 - 我在 google chrome 中看到了这个。

【问题讨论】：

有趣。我还注意到元素的计算宽度是 0 没有空格和 40 有。
是的，它似乎是特定于 Chrome 的。也许只是一个 Chrome 错误？
white-space: nowrap 让它消失。
@thirtydot - 谢谢你的工作。

标签： css google-chrome text-indent

【解决方案1】：

正如我在评论中所说，white-space: nowrap 让它消失了。

但是，我不确定这里实际发生了什么。 Chrome/Safari + Opera 都以相同的方式显示“蓝框”，而 Firefox 和 IE7-9 不显示蓝框。

您的代码：http://jsbin.com/igewuy

使用white-space: nowrap“修复”：http://jsbin.com/igewuy/2

【讨论】：