Problema de ancho con sangría de texto negativo en CSS

Cuando ejecuto el código a continuación, veo un recuadro azul en la pantalla.Problema de ancho con sangría de texto negativo en CSS

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

¿Cómo es que si cambio el texto Hello World-HelloWorld, desaparece la caja azul?

Notas adicionales - Estoy viendo esto en google chrome.

Fuente

2011-10-21 John

texto-guión: -9999px – Jawad

interesante. También noté que el ancho calculado del elemento es 0 sin espacio y 40 con. – kinakuta

Sí, parece ser específico de Chrome. Tal vez solo un error de Chrome? – kinakuta

Como dije en un comentario, white-space: nowrap lo hace desaparecer.

Sin embargo, no estoy seguro de lo que está sucediendo aquí. Chrome/Safari + Opera se comportan de la misma manera y muestran el "cuadro azul", mientras que Firefox e IE7-9 no muestran el cuadro azul.

Su código: http://jsbin.com/igewuy

Con la "solución" white-space: nowrap: http://jsbin.com/igewuy/2

Fuente

2011-10-21 23:10:05 thirtydot

Problema de ancho con sangría de texto negativo en CSS

Respuesta

Cuestiones relacionadas