jQueryを使ってdisplay: inline-blockを使うときのFirefox2への対処を考える

display: inline-block が便利すぎてなんとか普通に使えないかと考えてみました。
これが使えるとコーディングでメンドイところがかなり減る感じ。

display: inline-block については
ヨモツネットさんが解説と使い方をわかりやすくまとめてくれてますので
以下のリンクでどれだけ便利かわかると思います。

• http://www.yomotsu.net/wp/?p=390
  
• http://yomotsu.net/works/081016cssnite/

IEではハックを併用して使うので
inline-block を使う事は現時点で推奨されないんでしょうけど…
それでも使いたい！

ということで

Firefox2以下以外のブラウザに適用するには。。。

現時点でCSSだけで対処できないのは Firefoxの2以下です。
Firefox2以下以外は下記のソースで使えます。(IEに関しては同じような動作をしてるだけ)

.inline-block {
display: inline-block;
*display: inline;
zoom: 1;
}

肝心のFirefox2以下は inline-block を適用する要素に
div(これはなんでもいいんですが)を噛ませた上で CSSで

.inline-block {
display: -moz-inline-box;
}

.inline-block div {
display: block; /* ここはinline要素のときだけでよさげ */
width: 親要素の幅;
}

とする必要があり 必要ない要素(div)が出てきて
inline-block を使う際のささやかな壁になってます、たぶん。

というわけで Firefox2を使ってる人向けには
JavaScript(jQuery)で必要なところを補ってあげようということをやってみます。

Firefox2以下に適用するとき楽をしたい

対象にする要素が決まってる場合

まずは inline-blockのCSSを定義します。

.inline-block {
display: inline-block;
*display: inline;
zoom: 1;
}

次に以下のスクリプトソースをヘッダか任意のJSファイルで実行します。

$(function(){
var UA = navigator.userAgent;
var version = UA.replace(/.+Firefox/([d.]+$)/,"$1"); // 追記参照
if(UA.match(/Firefox/) && version.match(/[12].[d.]+/)){
$(".inline-block").each(function(){
$(this).css("display","-moz-inline-box").html("
"+$(this).html()+"
");
});
}
});

これだけで大丈夫です。

対象にする要素を決めない場合 (いろんな要素がinline-blockを指定されてる場合など

inline-blockは使いはじめると便利さが沁みるようにわかるんですけど
こうなってくると対象をいちいち指定なんかしていられない！

上の例の場合は、.inline-blockにしか適用できないので
いちいちそれを指定するのも面倒くさい、inline-blockの要素にはまとめて適用したい場合は
下記のようにちょっと変えます。

まず li要素のdisplayプロパティ初期値はlist-item(IEはblock)なので blockにしておいて
inline-blockにしたい要素にさっきのスタイルを適用します。

この方法は ページ内に list-item がある場合は使えません。(強制的に -moz-inline-box にしてしまうので

li {
display: block;
}

.className {
display: inline-block;
*display: inline;
zoom: 1;
}

CSSでinline-blockを指定してもFirefox2以下ではlist-itemになってしまうので
display が list-itemの要素に display: -moz-inline-box を適用します。

$(function(){
var UA = navigator.userAgent;
var version = UA.replace(/.+Firefox/([d.]+$)/,"$1"); // 追記参照
if(UA.match(/Firefox/) && version.match(/[12].[d.]+/)){
$("body *").each(function(){
if($(this).css("display").match(/list-item/)) // 追加したところ
$(this).css("display","-moz-inline-box").html("
"+$(this).html()+"
");
});
}
});

ただこの方法だと 一度全部の要素をチェックするので
当然 実行速度はだいぶ遅くなります。

その辺考えると inline-block にしてるクラスを全部指定したほうが よさげです。

結局のところ。。。

書きながらこうやっても意外と全然壁低くなってないと思ったとか思わんとか。。。

追記

Firefox3.05になってからUAがちょっとかわって

var version = UA.replace(/.+Firefox/([d.]+$)/,"$1");

だとversion取得が出来ないので

var version = UA.replace(/.+Firefox/([d.]+)/,"$1");

とすれば正常にversion取得が出来ます。