Question

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

<!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，蓝框会消失吗？

其他备注 - 我在谷歌浏览器中看到了这一点。

Answer 1

正如我在评论中所说，white-space: nowrap使其消失。

但是，我不确定这里到底发生了什么。 Chrome / Safari + Opera的行为方式相同，只显示“蓝框”，而Firefox和IE7-9则不显示蓝框。

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

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

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

1 个答案: