searchingfor回答ポイント 110pt

ウォッチ

CSSでレイアウトしてWebページを作ろうとしているのですがIEでだけ

text-indent: -9999px;
で消したはずの文字などが1〓2文字残ってしまいます。原因などご存知の方がいましたらよろしくお願いします。

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

みんなの回答

flashcafe2005/11/18 19:42:58
満足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ではバグがあるという話もあります。

スター
- searchingfor 2005/11/19 03:35:18
  
  ありがとうございます。
  
  書き足りませんでした。WindowsのIE6でそんな現象が起きます。

齊藤2005/11/18 20:21:54
満足28pt

http://www.tohoho-web.com/css/reference.htm#display

とほほのスタイルシート入門

原因はよくわかりませんが、もともとそういった使い方をするものではないです。

文字を消す場合には

display: none;

の方が妥当な気がします。

スター

searchingfor 2005/11/19 03:45:50

ありがとうございます。

text-indent: -9999px;を使った場合の解決方法をお願いします。

quintia2005/11/19 12:20:23
満足27pt

http://ask.jp/

Ask.jp

URLはダミーです。この回答自体にはポイント不要です。

1.の回答にもある通り、ごくごく単純な、

<html>

<head>

<title>無題ドキュメント</title>

<!--

.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だけ挙動が違う部分があるのだと思います。

スター

searchingfor 2005/11/20 20:39:32

詳しくありがとうございます。

ちょっとやってみたのですが再現できませんでした；組みなおせば上手くいくだろうと思うんですが原因は把握したいですね…。

親要素たどって見ます。

n852005/11/20 09:26:11
満足27pt

http://www.google.co.jp/search?num=100&hl=ja&newwindow=1...

Google

「もともとの使い方」ではないかもしれませんが、実際にはテキストを消す方法としてよく使われているようですね。

実際のソースを見ていないので推測ですが、これは、text-indent: 以外のタグが関係しているのではないでしょうか。text-indent:が適用されている文字の長さ（文字数）を大きく変えるとどうなりますか？

http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/text.html#inden...

$B%F%-%9%H(B

あとは、「負の値は不正ではないが、実装上は値に特定の制限範囲が生じることもある」というような記述も見られるので、一桁減らして-999pxにしてみるとか？

スター

searchingfor 2005/11/20 20:40:50

ありがとうございます。

テキストの長さは関係ないようです。-999pxでは画面が縦に長くなったときに現れてしまいますｗ

その他の回答を読む

この質問へのコメント

コメントはありません

この質問への反応（ブックマークコメント）

質問の情報

登録日時: 2005-11-18 18:28:58
終了日時: --
回答条件: 回答にURL必須 1人2回まで

この質問のカテゴリ

コンピュータ

CSSでレイアウトしてWebページを作ろうとしているのですがIEでだけ

みんなの回答

flashcafe2005/11/18 19:42:58
満足28pt

searchingfor 2005/11/19 03:35:18

齊藤2005/11/18 20:21:54
満足28pt

searchingfor 2005/11/19 03:45:50

quintia2005/11/19 12:20:23
満足27pt

searchingfor 2005/11/20 20:39:32

n852005/11/20 09:26:11
満足27pt

searchingfor 2005/11/20 20:40:50

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

CSSでレイアウトしてWebページを作ろうとしているのですがIEでだけ

みんなの回答

flashcafe2005/11/18 19:42:58 満足28pt

searchingfor 2005/11/19 03:35:18

齊藤2005/11/18 20:21:54 満足28pt

searchingfor 2005/11/19 03:45:50

quintia2005/11/19 12:20:23 満足27pt

searchingfor 2005/11/20 20:39:32

n852005/11/20 09:26:11 満足27pt

searchingfor 2005/11/20 20:40:50

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

flashcafe2005/11/18 19:42:58
満足28pt

齊藤2005/11/18 20:21:54
満足28pt

quintia2005/11/19 12:20:23
満足27pt

n852005/11/20 09:26:11
満足27pt