人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSでレイアウトしてWebページを作ろうとしているのですがIEでだけ
text-indent: -9999px;
で消したはずの文字などが1〓2文字残ってしまいます。原因などご存知の方がいましたらよろしくお願いします。

●質問者: searchingfor
●カテゴリ:コンピュータ
✍キーワード:CSS IE Web レイアウト
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● flashcafe
●28ポイント

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ではバグがあるという話もあります。

◎質問者からの返答

ありがとうございます。

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


2 ● 齊藤
●28ポイント

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

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

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

文字を消す場合には

display: none;

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

◎質問者からの返答

ありがとうございます。

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


3 ● quintia
●27ポイント

http://ask.jp/

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

◎質問者からの返答

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

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

親要素たどって見ます。


4 ● n85
●27ポイント

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にしてみるとか?

◎質問者からの返答

ありがとうございます。

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ