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

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

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/11/18 18:28:58
  • 終了:--

回答(4件)

id:flashcafe No.1

flashcafe回答回数50ベストアンサー獲得回数02005/11/18 19:42:58

ポイント28pt

http://www.zspc.com/documents/css2/text/textindent.html

CSS2対応状況ガイド:text-indent

対応状況はこのようになっています。

ちなみにIE 6/Winでは正常に表示されました。

IE 5/Macではバグがあるという話もあります。

id:searchingfor

ありがとうございます。

書き足りませんでした。WindowsのIE6でそんな現象が起きます。

2005/11/19 03:35:18
id:SaitoAtsushi No.2

齊藤回答回数11ベストアンサー獲得回数12005/11/18 20:21:54

ポイント28pt

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

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

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

文字を消す場合には

display: none;

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

id:searchingfor

ありがとうございます。

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

2005/11/19 03:45:50
id:quintia No.3

quintia回答回数562ベストアンサー獲得回数712005/11/19 12:20:23

ポイント27pt

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

id:searchingfor

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

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

親要素たどって見ます。

2005/11/20 20:39:32
id:n85 No.4

n85回答回数236ベストアンサー獲得回数212005/11/20 09:26:11

ポイント27pt

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


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

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

id:searchingfor

ありがとうございます。

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

2005/11/20 20:40:50

コメントはまだありません

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

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません