Błąd szerokości z wcięciem tekstu negatywowego w CSS

Po uruchomieniu kodu poniżej widzę niebieskie okno na ekranie.Błąd szerokości z wcięciem tekstu negatywowego w 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>

Jak to się stało, gdybym zmienić tekst Hello World do HelloWorld, niebieskie pudełko znika?

Dodatkowe uwagi - Widzę to w Google Chrome.

Źródło

2011-10-21 John

text-indent: -9999px – Jawad

Interesujące. Zauważyłem również, że obliczona szerokość elementu wynosi 0 bez spacji i 40 z. – kinakuta

Wygląda na to, że jest to Chrome. Może po prostu błąd Chrome? – kinakuta

Jak już powiedziałem w komentarzu, white-space: nowrap sprawia, że znika.

Jednak nie jestem pewien, co się tutaj dzieje. Chrome/Safari + Opera zachowują się w ten sam sposób i pokazują "niebieskie pole", podczas gdy Firefox i IE7-9 nie pokazują niebieskiego pola.

Kod: http://jsbin.com/igewuy

Z "naprawić" white-space: nowrap: http://jsbin.com/igewuy/2

Źródło

2011-10-21 23:10:05 thirtydot

Błąd szerokości z wcięciem tekstu negatywowego w CSS

Odpowiedz

Powiązane problemy