rollover2.jsとoperaと色々復習

凄く滑らかなロールオーバーを超お手軽に実装できるrollover2.jsというものがあるんですが
クロスフェードするロールオーバー処理をお手軽に実装するJavaScript – KAZUMiX memo
クロスフェードするロールオーバー処理 動作サンプル – XHTML サンプル | KAZUMiX memo

これ、imgにvertical-align:bottom;や
vertical-align:top;を指定してある場合、
operaでpositionの基準点がうまくいってないような感じの
とんでもない表示になってて(v10.50以前は確認してないけど)

例 / positionの基準点がうまくいってない感じの表示
[image]左がfirefox、右がopera

今気づいたけど
aタグの中にrollover2.jsのロールオーバー対象になるimgだけが入っていると
おかしくなる。

aタグの中にimgの他に、テキストが入っているとおかしくならない。

蛇足 / imgにvertical-align:bottomしたい(してる)理由

ご存知vertical-alignの初期値はbaselineなので
アルファベットのg,j,p,q,yの下に飛び出る部分(ディセンダって名称らしい*1)の余白が確保され、テキストと並べた時にimgの下に隙間ができちゃう

この隙間を埋めるには、vertical-align:text-bottomを指定するのが定石みたいなんだけど
operaだとテキストの位置がズレてたので(10.50以降?)、
いつしかbottomで指定するようになって
しばらくしてbottomを指定するようになった理由を失念してました。

[image]text-bottomとbottom
今確認してみたらbottomも表示が変だった><;;;なんだこれ。

とりあえず
vertical-align:text-bottomを指定しとけば
operaでクリック出来なくなるくらい表示が崩れる事はないのかな?

ここから先は失敗を含む試行錯誤メモ

operaだけvertical-align:bottomやtopをそれ以外の値で上書きできないか?

vertical-align:bottomが基本だと疑ってなかったので
問題のあるoperaだけディセンダが消える別の指定にすればいいかな?と思った

しかしoperaだけにcssを適用出来るハックってのが無いんですよね
(検索して出てくるのはopera11では対策されているのか、効き目がなかった)

で逆に考えて
「opera以外にハックで指定して、通常の指定がoperaだけに適用される」ようにすれば
operaだけvertical-align:text-bottomなんかを指定できるんじゃないか?と思ったけど
面倒なので却下。

cssua.js / CssUserAgent (cssua.js)で分岐させる

最近はてなで見かけたブラウザを判別してhtmlタグにclassを付けてくれるjs
これを使えば簡単にoperaだけにcssを指定できた。

参考 / もうCSSハックは必要なし!? ブラウザ毎にCSSを切り替える「cssuseragent」 | Web活メモ帳

cssua.jsの使い方はcssua.jsを読み込むだけ
cssua.jsを読み込んだページを
operaの”要素を調べる”やfirebugでソースをみると
htmlタグにclassがたくさんついてるのが確認できる。

いやでもjs使わないでどうにかならないかな?

この時点でまだopera以外もtext-bottomでいいのでは?と想像も出来てない。

aにdisplay:blockしたらvertical-align:bottom;でも問題なく表示できた。
でも全部のaにそんな指定したら困っちゃうし
rollover2.jsの範囲のaだけdisplay:blockするってのは
画像の名前だけで勝手にrolloverを指定出来るせっかくの超便利機能を制限することになるので避けたい。

display:inline-block;ならどうだろう?

block要素になればいいみたいだから指定してみたらいい感じだった。
が、いままで問題なかったsafariで
aタグテキストの上部に隙間ができてしまった。

むむむ。

そんで、じゃあそもそもvertical-alignをtext-bottomやtopにすると
どんな問題が発生するんだろう?と
検証してみてら色々こんがらがってきて
結局text-bottomで特に問題なさそうという最初に書いた結論に落ち着きそうな感じ。

*1 逆にb,d,f,h,k,lなどエックスハイト(小文字のxなどの高さ)の上ミーンライン?より飛び出した分はアセンダって名称らしい。


コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.