2007.06.29(Fri)
ブラウザのレンダリングモード切替スイッチ一覧
この本を参考に、HTML(XHTML)のバージョン、XML宣言の有無、DTDの有無によってレンダリングモードを切り替えるブラウザについて調べたことがある。折角なので参考になる人もいるかもしれないから公開してみることにした。
ちなみにDTDとは「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」とあるような文書型宣言のこと。
言葉の意味は次の通り。Old Gecko系:NN6.x、Mozilla1.0、New Gecko系:Fire Fox、Mozilla1.1以上、NN7以上、Safari系:Safari1.0以上、Opera7.x:Opera7以上のことでOperaの情報が古いが、まぁOperaは最もW3Cの仕様に忠実なレンダリングをするので、FireFoxで問題なければまず崩れることはない。Operaで崩れる現象が起きた場合は、それはOperaがおかしいのではなくコードがおかしく、FireFoxの実装がおかしいともいえる場合が多々(逆もあるが)。
S:標準(StandardI)モード、AS:Almost Standardモード、FS:Full Standardモード、Q:Quirksモード(後方互換モード)。標準モードとAlmost Standardモード、Full Standardモードはほぼ同じと考えても差し支えない。ASの場合に若干tableセル内に入れた画像の余白が変わるだけ(と認識している)。
ちなみにDTDとは「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」とあるような文書型宣言のこと。
言葉の意味は次の通り。Old Gecko系:NN6.x、Mozilla1.0、New Gecko系:Fire Fox、Mozilla1.1以上、NN7以上、Safari系:Safari1.0以上、Opera7.x:Opera7以上のことでOperaの情報が古いが、まぁOperaは最もW3Cの仕様に忠実なレンダリングをするので、FireFoxで問題なければまず崩れることはない。Operaで崩れる現象が起きた場合は、それはOperaがおかしいのではなくコードがおかしく、FireFoxの実装がおかしいともいえる場合が多々(逆もあるが)。
S:標準(StandardI)モード、AS:Almost Standardモード、FS:Full Standardモード、Q:Quirksモード(後方互換モード)。標準モードとAlmost Standardモード、Full Standardモードはほぼ同じと考えても差し支えない。ASの場合に若干tableセル内に入れた画像の余白が変わるだけ(と認識している)。
タグ(ブログ内検索もできます):後方互換モード レンダリング IE6 Quirksモード XHTML CSS スタイルシート バグ
2006.12.20(Wed)
【CSS】IE7のコメントアウトしないと左右のmarginが反映されないバグ!?
IE7の日本語正式版がリリースされて、暫く立った。
今まで作ったページで特に表示が崩れたり、変になる箇所もなく平穏無事に過ごしてきた。
ある新しいページを作ることになり、IE7で表示を確認するとどーもおかしい。
画像があって、その右側に簡単な説明文が入るというよくみる表示方法でIE7だけで左右のmarginが無視されてしまうのである。
しかも同じようなスタイルを適用している別の箇所では、左右のmarginが効いている。
つまり、同じようなHTMLソースと同じようなスタイルをCSSで指定しているのに、片方は左右のmarignが効き、片方は左右のmarginが無視されているのだ。
一体どういうことだ!?っとソースコードを何回も見直してみるが、誤った記述はない。
あーでもない、こーでもないと色々いじっていたが、全く改善されず。
一行一行シラミツブシにHTMLのコードを読んでいた、ハタと気が付いた。
「コメントアウトの有無じゃねーかよ!!(怒)」
今まで作ったページで特に表示が崩れたり、変になる箇所もなく平穏無事に過ごしてきた。
ある新しいページを作ることになり、IE7で表示を確認するとどーもおかしい。
画像があって、その右側に簡単な説明文が入るというよくみる表示方法でIE7だけで左右のmarginが無視されてしまうのである。
しかも同じようなスタイルを適用している別の箇所では、左右のmarginが効いている。
つまり、同じようなHTMLソースと同じようなスタイルをCSSで指定しているのに、片方は左右のmarignが効き、片方は左右のmarginが無視されているのだ。
一体どういうことだ!?っとソースコードを何回も見直してみるが、誤った記述はない。
あーでもない、こーでもないと色々いじっていたが、全く改善されず。
一行一行シラミツブシにHTMLのコードを読んでいた、ハタと気が付いた。
「コメントアウトの有無じゃねーかよ!!(怒)」
2006.11.21(Tue)
クソIEをハックしてやる!(IEの条件分岐の使い方)
Webに関する仕事をしている関係で、最近のトレンドとしてWeb標準に基いた(X)HTML、CSSを記述するというのが流行りだ。
特に、旧来のtableレイアウトから脱却して、CSSレイアウトというのはトレンドの主流だろう。
CSSレイアウト、見栄えを全てCSSで行おうとすると「ムキー!!!」ってなるのがWinIE。まぁシェアが一番大きいブラウザなだけに厄介である。
皆さんはWinIEに対してだけに適用したいスタイルがある場合どうやっているだろうか?
アンダースコアハック、スターハック、voice-familyハック等々対策は色々ある。
はっきり言って俺はこのハックが嫌いである。理由はクリーンなCSSではなくなってしまうから(←むしろ性格的な理由かも・・・)。なので極力この類のハックは使わない。
そこで便利なのが条件分岐のコメントアウト。簡単に言ってしまえばIEの特定のバージョン以下、未満、以上に対してスタイルを適用する方法。
特に、旧来のtableレイアウトから脱却して、CSSレイアウトというのはトレンドの主流だろう。
CSSレイアウト、見栄えを全てCSSで行おうとすると「ムキー!!!」ってなるのがWinIE。まぁシェアが一番大きいブラウザなだけに厄介である。
皆さんはWinIEに対してだけに適用したいスタイルがある場合どうやっているだろうか?
アンダースコアハック、スターハック、voice-familyハック等々対策は色々ある。
はっきり言って俺はこのハックが嫌いである。理由はクリーンなCSSではなくなってしまうから(←むしろ性格的な理由かも・・・)。なので極力この類のハックは使わない。
そこで便利なのが条件分岐のコメントアウト。簡単に言ってしまえばIEの特定のバージョン以下、未満、以上に対してスタイルを適用する方法。
| BLOGTOP |