When I run the code below, I see a blue box on 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>
How come if I change the text Hello World
to HelloWorld
, the blue box disappears?
Additional Notes - I am seeing this in google chrome.
As I said in a comment, white-space: nowrap
makes it disappear.
However, I'm not sure what's actually going on here. Chrome/Safari + Opera all behave in the same way and show the "blue box", whereas Firefox and IE7-9 do not show the blue box.
Your code: http://jsbin.com/igewuy
With the white-space: nowrap
"fix": http://jsbin.com/igewuy/2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With