- 締切済み
CSSでアイコンを付けるとWin IE6でのみおかしくなってしまいます
下記のCSSコードでh2を装飾しています。 h2が長くなって改行が入った場合、Win IE6でのみ表示がおかしくなってしまいます。 「h2 a」に「float: left;」を追加してやるといちよう解決出来たのですが、もっと良い方法はないでしょうか。 よろしくお願い致します。 <html> <style type="text/css"> h2{ margin-bottom: 10px; padding: 2px 5px 2px 21px; color: inherit; background: #E6E6E6 url(images/icon_h2.gif) 5px 0.5em no-repeat; } h2 a{ padding-right: 23px; background: url(images/icon_link1.gif) right center no-repeat; height: 1%; } </style> </head> <body> <h2><a href="#">あああああああああああああああああああああああああああ</a></h2> </body> </html>
- みんなの回答 （7）
- 専門家の回答
みんなの回答
- goldfox
- ベストアンサー率49% (123/249)
あれ？ ■あああああああああ ああああ□ というようにしたいのですよね？ それとも、リンクの文字と背景画像がかさならなければ文字の最後に付かなくてもいいのでしょうか？ すみません。やり直したところ、確かに背景と文字が重なりfloatで重ならなくなりました。 padding-right: 23px;が文字の最後にしか反映されないためですよね。 初めからh2（もしくはa）の長さを固定しておくとかどうですか？ あるいは背景はやめて<img>で文字の最後におくとか。 ＞http://www.dynamicdrive.com/style/csslibrary/item/css-breadcrumbs/ 具体的に、どこの背景でしょう？
- goldfox
- ベストアンサー率49% (123/249)
winXPIE6使用しています。 float: left;をつけてもお望みの状態にはなりませんでした(汗 IEのバグと考えても、画像にしてしまうのが一番手っ取り早いと思います。 ＞そうですか…。他のサイトで同じ事をやっているページを見つけましたがこちらでも問題なく見えますでしょうか？ ＞(こちらはWin IE5で見ても表示がおかしい分、完成度が低いですが…) ＞http://www.dynamicdrive.com/style/csslibrary/item/css-breadcrumbs/ すみません、NN7で見ても、私にも問題箇所が見つけられません(汗
お礼
実際作った物にリンクを張っておいたのですが消されちゃいました。 下記がWin IE6でOKなソースです。 <html> <style type="text/css"> h2{ margin-bottom: 10px; padding: 2px 5px 2px 21px; color: inherit; background: #E6E6E6 url(images/icon_h2.gif) 5px 0.5em no-repeat; height: 1%; } h2 a{ padding-right: 23px; background: url(images/icon_link1.gif) right center no-repeat; float: left; } </style> <body> <h2><a href="#">あああああああああああああああああああああああああああ</a></h2> </body> </html>
補足
Win IE6だけがダメなんです。
- NTJ
- ベストアンサー率44% (46/103)
> そうですか…。他のサイトで同じ事をやっているページを見つけましたがこちらでも問題なく見えますでしょうか？ > (こちらはWin IE5で見ても表示がおかしい分、完成度が低いですが…) > http://www.dynamicdrive.com/style/csslibrary/item/css-breadcrumbs/ ・・・画面の文字サイズなど、色々変更してみたのですが、問題の発生する部分を発見できませんでした・・・ orz... 細かいIEのバージョン差なのかしらん・・・。 ちなみに、Windows XP 上の IE 6.0 です。 ・・・そういえばXPって、色々画面に変な修正、加えてるんでしたっけねぇ。 その差かもしれないですね・・・
- awasumi
- ベストアンサー率41% (23/56)
どうゆう状況なのかわかりました。 私のほうでも、Java-Javaさんと同じような感じです。 ----------------------------- IEでは ■ああああああ□ ああああ □が文字と重なって見えます。 ------------------------------ Operaでは ■ああああああ ああああ■ とJava-Javaさんが求めている感じになりました。 --------------------------------- こんな記事を見つけました。 http://www.biwa.ne.jp/~shorio/opinion/20050605.html 『このような使い方がいいのか、悪いのかは別にして^^』の部分です。 IEの場合、折り返した時の全体の面積がブロック要素としてcenter right の位置が表示されている様子なのですね。 すみません、力不足で私には解決無理っぽいです。。。
お礼
言葉足らずですみません。私が言いたかったのはまさにそれです。 >こんな記事を見つけました。 >http://www.biwa.ne.jp/~shorio/opinion/20050605.html >『このような使い方がいいのか、悪いのかは別にして^^』の部分です。 ありがとうございます。参考にさせて頂きます。
- NTJ
- ベストアンサー率44% (46/103)
実際にそのサイズの画像を作成し、ご提示のソース内容のファイルを作成し、表示を行ってみましたが、 ご質問のような「文の上に画像が重なってしまう」という現象は、あたしの環境では発生しませんでした。 おそらく原因はCSSのその部分ではなく、もっと他の設定部分等に有るのではないでしょうか。 ※「アイコンは補助的な物で、必ずしも文書構造内に必要ない物ですので。」 というご意見は正しいかと思います。 しかし、「HTMLの誕生は文章構造を作るための規格ではなかった」という重要なポイントを無視しているように思えます。 失礼ですが回答履歴を参照させて頂きました。 相当にCSS等に造詣が深い方とお見受けいたします。 僭越ですが、文章構造に拘ってサイト構築を行いたいのであれば、HTMLでの作成は止めてXHTMLへ移行する事をお勧め致します。
補足
>僭越ですが、文章構造に拘ってサイト構築を行いたいのであれば、HTMLでの作成は止めてXHTMLへ移行する事をお勧め致します。 はい。ここでの質問に関しては(長い)XHTMLの記述をする必要はないと思い<html>としておりますが、実際の物では<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">といった感じでXHTMLで記述しております。 >おそらく原因はCSSのその部分ではなく、もっと他の設定部分等に有るのではないでしょうか。 そうですか…。他のサイトで同じ事をやっているページを見つけましたがこちらでも問題なく見えますでしょうか？ (こちらはWin IE5で見ても表示がおかしい分、完成度が低いですが…) http://www.dynamicdrive.com/style/csslibrary/item/css-breadcrumbs/
- NTJ
- ベストアンサー率44% (46/103)
どのようなデザインが目的なのか不明なのと、アイコン画像が提示されていないで推定の域を出ませんが、 「H2には左にアイコンを付けたい」 「H2の中にAタグがある場合はH2規定のアイコンを隠して、文末にアイコンを付けたい」 「しかしIE6では自動改行が掛かった場合に、文末のアイコンが文末ではなく、H2領域の中央になってしまう」 という事でしょうかね？ だとすると・・・ まず最初に言える事は「背景画像はアイコンを付けるための物ではない」ですね。 普通に考えるならCSSではなく、マトモにHTMLへ記述する所でしょう。 また、CSSで解決するなら本筋から行くなら、content で解決すべきところですね。（ブラウザが対応していないので、意味が無いですが） まぁ、現状はどうにもならなさそうな雰囲気なので、この状況で解決する策を提示するのなら、「背景画像を工夫する」のが一番簡単ではないかと思います。 具体的には背景画像を上下左右から離したい幅分大きくして余白を付けて、その部分を透過にしてやります。 そして、 background: url(images/icon_link1.gif) right center no-repeat; を background: url(images/icon_link1.gif) right bottom no-repeat; にしてやれば、目的は達せられるのはないかと思われます。 同じくH2側のアイコンも余白付きにすれば、5px 0.5em の指定も、left top で済むのではないかと思います。
補足
言葉足らずですみません。 「icon_h2.gif」は11px×11pxで、「icon_link1.gif」は13px×13pxの小さい画像になります。 >「H2の中にAタグがある場合はH2規定のアイコンを隠して、文末にアイコンを付けたい」 >「しかしIE6では自動改行が掛かった場合に、文末のアイコンが文末ではなく、H2領域の中央になってしまう」 「リンクが張られた場合には、リンクのアイコンを追加する」という事をしたいと思っています。 H2領域の中央ではなく、「あああああ」の部分に後ろ側のアイコンが文末に重なってしまいます。 >まず最初に言える事は「背景画像はアイコンを付けるための物ではない」ですね。 >普通に考えるならCSSではなく、マトモにHTMLへ記述する所でしょう。 私の考えでは、HTMLに記述する事ではないと思いますが…。 アイコンは補助的な物で、必ずしも文書構造内に必要ない物ですので。 この話は、色々意見があると思いますので、ここまでにしておいて欲しいです。
- awasumi
- ベストアンサー率41% (23/56)
どのように表示がおかしくなるのか具体的にお願いできますか？ また、どのようにしたいのかもお願いします。
補足
改行が入った場合、「あああああ」の部分に後ろ側のアイコンが重なってしまいます。 CSSを修正するだけでアイコンが重ならないようにしたいです。 よろしくお願いします。
お礼
>具体的に、どこの背景でしょう？ 「>>」となっている画像の部分です。 この部分だけを取り出して、現象が起こるサンプルを作ってはあるのですが、リンク張るとまた消されちゃいます。 いただいたヒント(背景はやめて<img>で文字の最後におく)を元に修正してみました。ありがとうございます。 リンク張られた(a要素が追加された)ときに、隠してある画像を表示するという物です。 あまりシンプルでないので微妙ですが… <html> <style type="text/css"> h2{ margin-bottom: 10px; padding: 2px 5px 2px 21px; color: inherit; background: #E6E6E6 url(images/icon_h2.gif) 5px 0.5em no-repeat; } h2 img { display: none; border: none; } h2 a img{ margin-left: 10px; display: inline !important; } </style> <body> <h2><a href="#">あああああああああああああああああああああああああああ<img src="images/icon_link1.gif" alt="" width="13" height="13" /></a></h2> </body> </html>
補足
>あれ？ >■あああああああああ > ああああ□ >というようにしたいのですよね？ はい。先ほどのソースは、表示崩れを防ぐのを優先した妥協案です。 またまた言葉足らずですみません。