Проблема ширины с отрицательным отступом текста в CSS - PullRequest
Новая
       32

Проблема ширины с отрицательным отступом текста в CSS

5 голосов
/ 22 октября 2011

Когда я запускаю приведенный ниже код, на экране появляется синее поле. 

<!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.

1 Ответ

5 голосов
/ 22 октября 2011

Как я сказал в комментарии, white-space: nowrap заставляет его исчезнуть.

Однако я не уверен, что на самом деле здесь происходит.Chrome / Safari + Opera ведут себя одинаково и показывают «синий ящик», тогда как Firefox и IE7-9 не показывают синий ящик.

Ваш код: http://jsbin.com/igewuy

С white-space: nowrap «исправлением»: http://jsbin.com/igewuy/2

...