Geek Answers Handbook

CSS indented width issue in CSS

When I run the code below, I see a blue screen on the screen.

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

Why, if I change the text Hello Worldto HelloWorld, does the blue square disappear?

Additional notes . I see this in google chrome.

+5
source share
1 answer

As I said in a comment, it white-space: nowrapmakes it disappear.

However, I'm not sure what is really going on here. Chrome / Safari + Opera behave the same and show a blue box, while Firefox and IE7-9 do not display a blue square.

Your code: http://jsbin.com/igewuy

white-space: nowrap "fix": http://jsbin.com/igewuy/2

+5

More articles:


All Articles