突然だが、私はpositionを指定するのが苦手だ。
でも、どうしても使いたい時がある。
それで使ってみるとIE6+IE7 VS Firefox+safariになる。
Firefox+safari+IE8で確認すると、意図する場所ボックスが移動しているのに、IE6+IE7は全然違うところにある。
おおおーーいぃぃぃぃ・・・。orz..
検索した結果、親要素に100%を指定すると問題は解決する。
おのれ、IE。
もういやん。(汗
デザインの話を細々としています。
突然だが、私はpositionを指定するのが苦手だ。
でも、どうしても使いたい時がある。
それで使ってみるとIE6+IE7 VS Firefox+safariになる。
Firefox+safari+IE8で確認すると、意図する場所ボックスが移動しているのに、IE6+IE7は全然違うところにある。
おおおーーいぃぃぃぃ・・・。orz..
検索した結果、親要素に100%を指定すると問題は解決する。
おのれ、IE。
もういやん。(汗
夏も近いと言うことで、タイトルもホラー漫画っぽくしてみました。( ̄▽ ̄*)
先ほどの画像を使わなくても意図したフォントが表示できる-Google Font API-を書いているときに出会ったバグです。
らばQ
というサイトをご存知か?
国内外を問わず、面白い記事が満載のサイトですが、こちらで「今時のWEBデザインの分析」なる記事。
元記事は海外みたいです。
以前、透過PNGのIE6対策にはこのJava Scriptで紹介したことがあるiepngfix.js。
結構使い勝手がよいので、ちょこちょこと使っていたのですが、最近になって納品済みサイトで問題続出。
一体どうしたことかと調べてみた。
以前「IE6で文字が二重表示される怪。〜次から次へとIEめ。」と言う、ウラミブシなエントリーを上げたことがある。
ウラミたくもなる。
IE6には色々なバグがあるが、最近一番「コノヤロー」なバグはこれだ。
floatとfloatの間にコメントを入れると、一番最後にfloatしたコンテンツの一番下のテキストが重複表示されるのだ。
回避方法としては、コメントタグを消せばいいのだけど、私が遭遇したのは、いずれもDreamweaverがはき出したライブラリを囲む「コメント」なのだ。
<!– #BeginLibraryItem “/Library/library.lbi” –>・・・というコメントが引っかかり、泣きながらライブラリの使用をあきらめた前回。
今回はどうしてもライブラリの使用をしたかったのだが・・前回同様、撃沈した。
とは言うものの・・。ここで負けたら女が廃る!
と、言うわけで検索、検索♪
CSSでbodyに設定した背景画像がIEでずれる怪・Safari3も背景がずれる・・。で、IEとSafariの困ったバグの話をしましたが、今回はFireFoxです。それもMac限定。orz….。
MacFireFox3もFireFox2とは違い背景ずれます。
なおWindows FireFox3ではこのバグはない模様。
ひょんなんことからMacFireFoxをアップデートする前に上げたサイトをのぞいてみると・・・なんか、右にずれてる。
そのサイトもIE7とSafari用に背景を左に1pxハックしているため、それが原因かな?と思ったため、ハックを外してみても表示は変わらず。
もしや( ̄▽ ̄;
あわてて検索してみる。
以前「 CSSでbodyに設定した背景画像がIEでずれる怪」と言うアイテムをエントリーしていたが、それの後日談。
safariでも背景がずれる。
・・・最低である。safariもずれるとは。
原因はIEと同じで、「ブラウザウインドウの幅-bodyに指定された背景幅=奇数サイズ」になった時にずれるらしい。1pxずつブラウザ枠を動かすとずれたりずれなかったりするので間違いないだろう。
今回構築中のサイトで現象を発見し、その他IE6のカラム落ちを含め煮詰まること約半日・・やはりハックを使わねばならないようだ。
今のところsafari2での確認をしていないため不明だが、safari3でのずれを解消するため、ハックを使うことにした。