firefoxでborderがうまいこと表示されない現象にハマりました
上はfirefox1.0.6でborderがうまく表示されない現象のサンプルです。どうやら背景画像との組み合わせなどによって発生するようですが、font-sizeの値を変えるとうまいこと表示されるなど、挙動が怪しく、原因がさっぱりわからず終いでした。
li要素に指定したborder-bottomが途中で途切れたりしています。IEやsafariなどではこのような現象はおきませんでした。
li要素にheightを明示してあげると、うまいこと表示されます。ですが、そうしてしまうと、文字が折り返したり、ブラウザ側でサイズを拡大したりした際に、firefoxなどでは背景画像が途切れてしまったり、文字が重なってしまったりするので、にっちもさっちも行かず困ってしまいます。
a要素のほうにborderをつけたり、端からboder付きの背景画像を用意して位置をbottom left などとしたりなんだり、いろいろ弄りましたが、どれもうまくいきませんでした。結局のところ原因がわからないので代替案として、li要素の最後に
#nav li:after { content: url(/images/border_ccc.gif); }といった感じでborder用の画像を配置してあげて、:afterに対応していないIE用には
* html #nav li { border-bottom: 1px solid #ccc; }として、逃げ腰な方法でとりあえずの解決を迎えています。
すべてのfirefoxのバージョンでこの現象が起こるものかはわかりません。僕が確認したのはfirefox1.0.6だけです。
※上の解決策は例えばIEがバージョンして:afterに対応したり、もしくは「* html」のような記述を無視するようになれば、再度対応を迫られることになりかねませんので、要注意かもしれません。またsafariでは:afterで指定したスタイルを解釈できるものの、意図しない位置に画像を配置してしまうようので、結局どっちつかずだということも判明しました。ということで、僕はもうJSでUAを振り分けてスタイルを上書きすることにしました。が、ここはひとつギブアップするというのも、場合によってはひとつの手ではないかと思います。
※その後、font-sizeのさじ加減が大きく影響していそうだと、ご指南頂きました。例えば上のサンプルだったら、font-size: small; を font-size: 12px; とすると治ったりするようです。
※Firefox1.5のバージョンアップに伴い、上の不具合は修正された模様です。
このエントリーのトラックバックURL
http://www.extype.com/mt/mt-tb.cgi/163
これ！僕も以前遭遇しました。
回避方法をどうしたものかかなり悩みましたが、こういう方法があるんですね。
投稿者 TOM : August 25, 2005 09:26 PM
firefoxでこの状態のboderがすべて表示されないならまだしも、途中で途切れたりするのは、中途半端というか、若干困ってしまいますね。上の解決策はsafariでおかしなことになっていましたのであまりよくないかもしれないです。一応追記しておきました。
投稿者 kawachi : August 25, 2005 11:25 PM
ちょっとDLして直してみた。
上の例ならliに背景画像引かずにulに持っていってあげれば解決するっぽい。↓関係ありそうなところだけ。
#nav1 ul { border-right: 1px solid #ccc; border-top: 1px solid #ccc; background: url(images/sample_manu_bg.gif) left top repeat-y;}
#nav1 li { border-bottom: 1px solid #ccc; }
細かいところは忙しくて検証してないのでおかしいかも。
投稿者 Kyosuke : August 26, 2005 05:26 PM
確かに、このサンプルのような背景画像だったらulに敷けば解決だったか。サンプルとして甘かったなこれは！font-sizeの件は追記しておきました。どうもありがとうございましたー！
投稿者 kawachi : August 26, 2005 06:17 PM
昼間にテストしてみたんですが、ulに背景画像を書いた場合、hover時に線が表示されないことがあったと思います。
それにしてもFirefoxのボーダーは結構バグが多いですね…。
DeerParkではちゃんと見れるので、1.5は期待できそうです。
投稿者 Novu : August 26, 2005 11:14 PM
Novuさん情報ありがとうございます。
なるほど。ulに敷いてもまだそうなりますかあ。手強いですね。バージョン1.5に期待しておきます。
投稿者 kawachi : August 27, 2005 08:04 PM