Tag » バグ
clearfixを検証する
乱雑モックアップさんのブログで興味深い記事があったので検証してみました。
どうやらFirefoxだけに発生するclearfix関連のバグみたい。
調べてみたところclearfixの「:after」の指定に問題が潜んでいるようで、Firefox 4.0でも同様の現象を再現できました。
※記事内で使われているclearfixは、いまどき ? いまさら ? clear fix のコード | ヨモツネットと同じものみたいなので、コードの解説はヨモツネットさんの記事を参照してみてください。コメント欄でも色々と言及されていて勉強になります。
jQueryで水平方向にスライドする開閉式メニュー
入れ子構造のリストでjQueryを使ったシンプルな開閉式メニューを自作してみたところ、CSSやjQueryで色々と不具合に遭遇しました。
CSSだとIEだけ表示が違ったりすることはよくありますが、jQueryでもブラウザー毎に挙動が違うことがあるようで久しぶりにハマりました…
Firefox 3.0.xでも背景画像が1pxズレる
下記のようなHTML構造で、bodyタグに背景画像をbackground-position: center top;みたいに中央配置したい場合があったりします。
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>でもこれbodyタグに指定すると1pxズレちゃうんですね。
IEだと1pxズレる問題は各所で「bodyタグにpadding-left: 1px;を指定したら回避できるよ」って感じで紹介されてるけど、実はFirefox 3.0.xやSafariなどにも同じような問題があって久しぶりにハマってしまった。
まずはググって調べてみたところSoh Tanakaさんのブログから参考になる記事を発見。
垂直スクロールバーの幅のサイズが奇数になってるのが原因みたいだ。
随分と解決に近づいた気もしたけど、記事内のView Final Demoでは解決できてないみたいなのでさらに調査してみた。
update ‐
Firefox 3.5で解決されたようです。WebKit系のブラウザーでの解決が待たれますね。
update ‐
Soh Tanakaさんのサイトがドメインを乗っ取られているようなので、リンクをはずしています。