Problema di larghezza con il rientro del testo negativo nei CSS

Quando eseguo il codice di seguito, vedo una casella blu sullo schermo.Problema di larghezza con il rientro del testo negativo nei 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>

Come mai se cambio il testo Hello World-HelloWorld, la scatola blu scompare?

Note aggiuntive - Sto vedendo questo in google chrome.

fonte

2011-10-21 John

text-trattino: -9999px – Jawad

interessante. Ho anche notato che la larghezza calcolata dell'elemento è 0 senza spazio e 40 con. – kinakuta

Sì, sembra essere specifico di Chrome. Forse solo un bug di Chrome? – kinakuta

Come ho detto in un commento, lo white-space: nowrap lo fa scomparire.

Tuttavia, non sono sicuro di cosa stia succedendo. Chrome/Safari + Opera si comportano allo stesso modo e mostrano la "scatola blu", mentre Firefox e IE7-9 non mostrano la scatola blu.

tuo codice: http://jsbin.com/igewuy

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

fonte

2011-10-21 23:10:05 thirtydot

Problema di larghezza con il rientro del testo negativo nei CSS

risposta

Problemi correlati