text-indent: -9999px;
で消したはずの文字などが1〓2文字残ってしまいます。原因などご存知の方がいましたらよろしくお願いします。
No.1
50
0
28pt
http://www.zspc.com/documents/css2/text/textindent.html
CSS2対応状況ガイド：text-indent
対応状況はこのようになっています。
ちなみにIE 6/Winでは正常に表示されました。
http://www.macedition.com/cb/ie5macbugs/textindentbug.html
MacEdition : IE 5 Mac text indent bug
IE 5/Macではバグがあるという話もあります。
No.2
111
28pt
http://www.tohoho-web.com/css/reference.htm#display
とほほのスタイルシート入門
原因はよくわかりませんが、もともとそういった使い方をするものではないです。
文字を消す場合には
display: none;
の方が妥当な気がします。
ありがとうございます。
text-indent: -9999px;を使った場合の解決方法をお願いします。
No.3
56271
27pt
Ask.jp
URLはダミーです。この回答自体にはポイント不要です。
1.の回答にもある通り、ごくごく単純な、
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=shift_jis” />
<title>無題ドキュメント</title>
<style type=”text/css”>
<!--
.test {
text-indent: -9999px;
}
-->
</style>
</head>
<body>
<p class=”test”>あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお<br />
かきくけこかきくけこかきくけこ</p>
</body>
</html>
のような記述に問題は見られません。(かきくけこかきくけこかきくけこ だけが表示される)
text-indentを指定している部分の中に別の要素を置いてあってそのCSSが影響しているとか、text-indentを指定している部分より上位のCSSが影響しているとか、そういったもっと複合的な原因があるのだと思います。
「現象が再現できる最小のHTML+CSSソース」が作れますか?
その上でこの回答にコメントで示していただくなりした方が良いと思います。
例えば、
(略)
.test2 {
text-indent: 0px;
float: right;
}
(略)
<p class=”test”>あいうえおあいうえおあいうえお<span class=”test2”>あいうえお</span>あいうえおあいうえお<br />
かきくけこかきくけこかきくけこ</p>
(略)
の様にするとfloat:rightを指定したspan要素の部分だけ出てきますよね。
(略)
.test2 {
float: right;
}
(略)
というようにtext-indent: 0px;を削除すると、上位の<p class=”text”>でのtext-indent: -9999pxが効いてきくるためか表示されなくなります。
以上のことはIEでもFirefoxでも挙動が同じなのですが、こんな類の複合的な状況でIEだけ挙動が違う部分があるのだと思います。
詳しくありがとうございます。
ちょっとやってみたのですが再現できませんでした；組みなおせば上手くいくだろうと思うんですが原因は把握したいですね…。
親要素たどって見ます。
No.4
23721
27pt
「もともとの使い方」ではないかもしれませんが、実際にはテキストを消す方法としてよく使われているようですね。
実際のソースを見ていないので推測ですが、これは、text-indent: 以外のタグが関係しているのではないでしょうか。text-indent:が適用されている文字の長さ（文字数）を大きく変えるとどうなりますか？
あとは、「負の値は不正ではないが、実装上は値に特定の制限範囲が生じることもある」というような記述も見られるので、一桁減らして-999pxにしてみるとか？
ありがとうございます。
テキストの長さは関係ないようです。-999pxでは画面が縦に長くなったときに現れてしまいますｗ
53
50
1
1
ありがとうございます。
書き足りませんでした。WindowsのIE6でそんな現象が起きます。