CSSで負のテキストのインデントを含む幅の問題

以下のコードを実行すると、画面に青色のボックスが表示されます。私はHelloWorldからHello Worldは、青色のボックスが消え、テキストを変更した場合 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>

はどのように来ますか？

追加情報 - 私はこれをGoogle Chromeで見ています。

出典

2011-10-21 John

テキストインデント：-9999px – Jawad

興味深いです。私はまた、要素の計算された幅がスペースなしで0であり、40であることに気づいた。 – kinakuta

ええ、Chrome固有のようです。たぶんChromeのバグですか？ – kinakuta

私がコメントで言ったように、white-space: nowrapはそれを消滅させます。

しかし、私は実際に何が起こっているのかは分かりません。 Chrome/Safari + Operaはすべて同じように動作し、「青いボックス」を表示しますが、FirefoxとIE7-9は青いボックスを表示しません。

あなたのコード：http://jsbin.com/igewuy

white-space: nowrap "修正" の場合：http://jsbin.com/igewuy/2

出典

2011-10-21 23:10:05 thirtydot

CSSで負のテキストのインデントを含む幅の問題

答えて

関連する問題