« 【JS】HoverLightbox Redux | メイン | 【Adobe】 Flash Media Encoder 正式版無償配布 »
2007年02月23日
【Firefox】Captioon要素内でインライン要素をつかうと・・・
今年も思わぬところで悩まなければいけなくなりそうだ・・・。
現在やっている案件で、caption要素の文章中にインラインを入れて「注釈」的表現にしなければいけないのだが、em要素やspan要素を入れた途端Firefox上では浮いてしまった。
つまり、caption要素ないでインライン要素を使うと幅が保てず文字が重なってしまう現象が起きてしまった。
バグなんだろうか・・・。
迂闊にblock要素を指定することもできないので、ひとまず今回はcaption内のインライン要素（今回はem要素）に対してだけ注釈的文字分のpaddingを与えて広げるしか方法が分からなかった。
IEやOperaなどでは、インライン入れても問題ないので調整も厄介になりそうだ。
ネット上を彷徨ってみたけども、解決策になりそうな情報もないですよ。
誰か解決策知らないですかね・・・。（汗）
去年の今頃はCSSレイアウトサイトの印刷制御に前途多難でしたが、今回はコレですか・・・ orz
【追記：2007.02.23】
昨晩、結局ずっと悩む結果に・・・
最終的には、Mozilla系を無理くり表示できるようにするためにcaption要素内のインラインに対して、今回必要なだけのpadding-leftの数値で広げてみた。（苦肉の策）
ちなみに、インライン要素の右側はちゃんとなってるのでpadding-leftだけで何とかなる。
ただ、これをするとIE7も普通に適用してしまう。IE7専用のCSSハックを用いても、Operaが回避できない。
#IE6以前は、コンディショナルコメントをつかってるからそっちて調整すれば問題なし・・・（以前の記事より）
さて、問題のOpera用向けをどうするか・・・、ということで調べてみたところ、Opera9に対してにはCSSを特別に当てられそうな情報がちらほら。
私の環境でやってみたところ、
caption em{
padding-left: 27px;
text-align: left;
}
*+html caption em {padding:0;} /* IE7 only */
html:first-child caption em{padding:0;} /* Opera9 only */
と、*+html ～ と html:first-child ～ ってーのを組み合わせると、Opera9だけにもCSSが反応してくれた。
あまり良ろしくないハックだとは思うけど、やらねばならない状況はこれでどーにか・・・
この記事が為になった方は ⇒
投稿者 Manabu : 2007年02月23日 04:21 | Firefox
トラックバック
このエントリーのトラックバックURL:
http://www.freesia.org/mt/mt-tb.cgi/313