HOME ≫ Category 「ばろむわん」 ≫ [1] [2] [3]
MacIEの癖
2006.06.21 ｜Category …ばろむわん
あちこち拝見してて割と目に付きやすいMacIEバグ小ネタをいくつかメモ。
特に致命的でもないのでどーでもいい辺りですが。
しかし色々なものがよくはみ出したり消えたりする。さすがだMacIE。ヽ(´ｰ`)ﾉ
特に致命的でもないのでどーでもいい辺りですが。
- テーブルが中央揃えにならないことがある。（プラグインのカレンダーとか）
→取り敢えずCSSでtableにmargin:auto放り込んでるが、条件がよく分かってない自分。常時なのだろか？ - CSSでborder-collapse:collapseが効かない。
→（多分）HTMLの方でも指定しないと、他のブラウザとかなり違って見える。 - tableのtext-alignがtr,th連中に継承されない。
→CSSでそれぞれに指定してますです。 - 自動折り返しのあるテキスト（ブログ記事本文など）にletter-spacing指定すると、その分ブロックをはみ出す。フォーム部分に指定すると更に挙動不審。
- overflowに弱い。特にタグの解説サイト様とかでpreにoverflowかけられると、きれいさっぱり中身が見えなくて泣かされること多し。ソース表示で読めるんだけど。
→divにかけるのは割と平気とか。詳細はCSSバグリスト等ご参照の程。 - 背景画像がたまに見えない。
→url引用でシングルクォート付いてると読めないことがある。互換モードだと付いてても平気か？ - ブログパーツのflashがスクロールすると消えて見えることがある。
→divで組んだテンプレだと多分確実に。テーブル組みだと消えないのだろか？
しかし色々なものがよくはみ出したり消えたりする。さすがだMacIE。ヽ(´ｰ`)ﾉ
PR
IEの癖その２
2006.04.24 ｜Category …ばろむわん
自分が語るよりも、よく参考にさせていただくサイト様を紹介した方が早いと今頃気付く。
沢山ありますが、取り敢えず３つほど。直リン怖いのは自分が鶏だからです。先様が怪しい所なわけでは決してありませんので、念のため。
●CSSによる段組（マルチカラム）レイアウト講座
www.geocities.jp/multi_column/index.html
ブログテンプレ組むには解りやすいと思う…CSS2対応で最近のもの。
レイアウト組んでからクロスブラウザCSSに悩む時には
●CSSバグリスト＠CSSバグ辞典スレッド
cssbug.at.infoseek.co.jp/index.htm
●HTML,CSSバグ＆回避法リスト
www.keynavi.net/ja/bugh/index.html
目次を拝見しただけでクロスブラウザ樹海が如何ほど深いか知れるという。双方とも、少し古いブラウザに対応させたい場合に参考になります。項目多すぎて全部読むのはお手上げ。対症療法に。
WinIE互換モードのborderやpaddingをwidthに含めてしまう癖については、CSS3ではその計算法が正になるとか何処かで読んだので、将来的にはどうなんだろう、と悩むところ。DOCTYPEスイッチの無い古めのブラウザではどのみち各互換モード仕様だろうし。Mozilla系でWinIE互換式のwidth計算をさせるタグ？もあったと思うが、困ったことにMacIEはこの計算方法が出来ないのだー。ははは。ヽ(´ｰ`)ﾉ
まだ続きそう。
沢山ありますが、取り敢えず３つほど。直リン怖いのは自分が鶏だからです。先様が怪しい所なわけでは決してありませんので、念のため。
●CSSによる段組（マルチカラム）レイアウト講座
www.geocities.jp/multi_column/index.html
ブログテンプレ組むには解りやすいと思う…CSS2対応で最近のもの。
レイアウト組んでからクロスブラウザCSSに悩む時には
●CSSバグリスト＠CSSバグ辞典スレッド
cssbug.at.infoseek.co.jp/index.htm
●HTML,CSSバグ＆回避法リスト
www.keynavi.net/ja/bugh/index.html
目次を拝見しただけでクロスブラウザ樹海が如何ほど深いか知れるという。双方とも、少し古いブラウザに対応させたい場合に参考になります。項目多すぎて全部読むのはお手上げ。対症療法に。
WinIE互換モードのborderやpaddingをwidthに含めてしまう癖については、CSS3ではその計算法が正になるとか何処かで読んだので、将来的にはどうなんだろう、と悩むところ。DOCTYPEスイッチの無い古めのブラウザではどのみち各互換モード仕様だろうし。Mozilla系でWinIE互換式のwidth計算をさせるタグ？もあったと思うが、困ったことにMacIEはこの計算方法が出来ないのだー。ははは。ヽ(´ｰ`)ﾉ
まだ続きそう。
IEの癖その１
2006.04.21 ｜Category …ばろむわん
では、4/21現在の新規テンプレからカスタマイズするのを前提に。
取り敢えずDOCTYPEは置いておいて（IE互換モードで）スタート。
全体をセンター表示させるつもりで順番にCSSの下準備。
まずbodyに「margin:0px; padding:0px;」を放り込むのが自分の好み。
●padding:0pxはOperaにいいそうなので、入れておいて損は無し。まめの様＆ひよ様Thanks。
●この段階でtext-align:centerを入れるとWinIEでは全体をセンター表示するが、そんなことになるのはIEだけだーっ（笑）
●更に全体の文字サイズや色の基本を設定するが、文字サイズを12pxにしてプレビューを見るとあら不思議。WinIEではプラグインカレンダーの文字サイズは変わってない。これは標準モードの時にはサイズ継承されるんだが。
CSSで全体をセンター表示させるには、#mainBlockに「margin:0px auto;」を放り込むだけで済む。正確にはここの左右marginがautoならいいわけで、上下marginの数値は自分の好みで入れれば良し。だがしかし。
●MacIEは互換モードでもこれだけでＯＫなんだが、WinIE互換モードではこれでセンター表示させられない。bodyにtext-align:centerと併用となる。WinIE標準モードならおけ。…混乱するっつーのに(^^;
更にIEの顕著な癖の１つがborder,margin,paddingの計算法が独特なこと。
試しに互換モードで#mainBlockに枠線引いてみると。あっと言う間にプラグインが下に落ちる。標準モードにしてHTMLプレビューやり直してみると、同じCSSなのに崩れてない。
互換モードの計算法に慣れてしまった人は標準モードにすると戸惑うんではなかろうか(^^;
このIE互換モードでプラグインが下に落ちたものをFirefoxで見ると、崩れてなかったりする。Firefoxで綺麗に作ったものをIEで見ると崩れてたりするのは、IEが互換モードなのかも。
クロスブラウザに興味のある方は、DOCTYPE宣言をチェックしてみるといいと思われ。
やっぱ標準モードの方が他に合わせ易いと思うんだが…。何故新規テンプレのDOCTYPEは変更になったんだろ？
取り敢えずDOCTYPEは置いておいて（IE互換モードで）スタート。
全体をセンター表示させるつもりで順番にCSSの下準備。
まずbodyに「margin:0px; padding:0px;」を放り込むのが自分の好み。
●padding:0pxはOperaにいいそうなので、入れておいて損は無し。まめの様＆ひよ様Thanks。
●この段階でtext-align:centerを入れるとWinIEでは全体をセンター表示するが、そんなことになるのはIEだけだーっ（笑）
●更に全体の文字サイズや色の基本を設定するが、文字サイズを12pxにしてプレビューを見るとあら不思議。WinIEではプラグインカレンダーの文字サイズは変わってない。これは標準モードの時にはサイズ継承されるんだが。
CSSで全体をセンター表示させるには、#mainBlockに「margin:0px auto;」を放り込むだけで済む。正確にはここの左右marginがautoならいいわけで、上下marginの数値は自分の好みで入れれば良し。だがしかし。
●MacIEは互換モードでもこれだけでＯＫなんだが、WinIE互換モードではこれでセンター表示させられない。bodyにtext-align:centerと併用となる。WinIE標準モードならおけ。…混乱するっつーのに(^^;
更にIEの顕著な癖の１つがborder,margin,paddingの計算法が独特なこと。
試しに互換モードで#mainBlockに枠線引いてみると。あっと言う間にプラグインが下に落ちる。標準モードにしてHTMLプレビューやり直してみると、同じCSSなのに崩れてない。
互換モードの計算法に慣れてしまった人は標準モードにすると戸惑うんではなかろうか(^^;
このIE互換モードでプラグインが下に落ちたものをFirefoxで見ると、崩れてなかったりする。Firefoxで綺麗に作ったものをIEで見ると崩れてたりするのは、IEが互換モードなのかも。
クロスブラウザに興味のある方は、DOCTYPE宣言をチェックしてみるといいと思われ。
やっぱ標準モードの方が他に合わせ易いと思うんだが…。何故新規テンプレのDOCTYPEは変更になったんだろ？
DOCTYPE
2006.04.20 ｜Category …ばろむわん
※HTMLやCSSがある程度読み書きできることを前提に書いていきます。
また、XHTMLまでバリバリな上級の方、MacIE眼中無しな方には、意味の無い記事となります。予めご了承下さい。
テンプレカスタマイズに嵌っていく段階で、なんでやねんと言いたくなることが多々ありましたが。
第１弾「DOCTYPE」。
「新規テンプレート作成」を開いてHTMLを見ると、まず１行目。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
これは何かと訊ねたら。DOCTYPE宣言です。としか判りません、自分。
要するにある規格のHTML言語で始めるよ〜と宣言するものらしいですが、素人にその中身を推し量る術など無く。使えるタグ、使えないタグが宣言の種類毎に決まってるそうですが、詳細は専門サイトを探してご参照のこと。通常はスルーして可。
クロスブラウザで何が問題かと言うと、各ブラウザにはこのDOCTYPEの種類によって振る舞いが変わる「DOCTYPEスイッチ」なる機能があること。この機能で大雑把に「標準(準拠)モード」or「(後方)互換モード」のどちらかになる。
上記の新規テンプレでの宣言時には、WinIEやOP、MacIEは「互換モード」。
（NSやFFは標準なのか互換なのか、解説サイトによって違ってたりするので判らず）
このモードは、古い形式のタグ記述でもブラウザが勝手に判断して読むよ〜という感じ？
ちなみにDOCTYPE宣言無しだと、大抵のブラウザは「互換モード」だそうな。
一方DOCTYPE宣言にURLを付けて
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
とすると（忍者の新規テンプレは一時これだった）、まず大抵のブラウザは「標準モード」。
他にHTML4.01 Strict のURL付も、MacIE含めて大概標準モードのはず。
このモードだと、割とブラウザ毎の差が出にくくてコントロールしやすいような。つか、「標準」と名が付くぐらいだから、新しく覚えるならこっちの方が良さそうな気がするんだが…だがしかし。
Mozilla系ブラウザは標準と互換の差があるのかどうかもよく判らないが、IEはWinもMacも標準と互換でかなり癖が違う。しかも。Win版とMac版ではそれぞれ全然違う癖なのだ！……一体何者ですかIE。
IEの標準モードと互換モード、どちらを選ぶかは人によると思うので一概に言えず。ただ、MacIEについては標準モードの方がまだましな気がした。
あうー長文…。日記形式ブログで解説もどきは無理があるな…テンプレ変えないと読みにくそうだ。
WinIEとMacIEの癖については次に続く。
また、XHTMLまでバリバリな上級の方、MacIE眼中無しな方には、意味の無い記事となります。予めご了承下さい。
テンプレカスタマイズに嵌っていく段階で、なんでやねんと言いたくなることが多々ありましたが。
第１弾「DOCTYPE」。
「新規テンプレート作成」を開いてHTMLを見ると、まず１行目。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
これは何かと訊ねたら。DOCTYPE宣言です。としか判りません、自分。
要するにある規格のHTML言語で始めるよ〜と宣言するものらしいですが、素人にその中身を推し量る術など無く。使えるタグ、使えないタグが宣言の種類毎に決まってるそうですが、詳細は専門サイトを探してご参照のこと。通常はスルーして可。
クロスブラウザで何が問題かと言うと、各ブラウザにはこのDOCTYPEの種類によって振る舞いが変わる「DOCTYPEスイッチ」なる機能があること。この機能で大雑把に「標準(準拠)モード」or「(後方)互換モード」のどちらかになる。
上記の新規テンプレでの宣言時には、WinIEやOP、MacIEは「互換モード」。
（NSやFFは標準なのか互換なのか、解説サイトによって違ってたりするので判らず）
このモードは、古い形式のタグ記述でもブラウザが勝手に判断して読むよ〜という感じ？
ちなみにDOCTYPE宣言無しだと、大抵のブラウザは「互換モード」だそうな。
一方DOCTYPE宣言にURLを付けて
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
とすると（忍者の新規テンプレは一時これだった）、まず大抵のブラウザは「標準モード」。
他にHTML4.01 Strict のURL付も、MacIE含めて大概標準モードのはず。
このモードだと、割とブラウザ毎の差が出にくくてコントロールしやすいような。つか、「標準」と名が付くぐらいだから、新しく覚えるならこっちの方が良さそうな気がするんだが…だがしかし。
Mozilla系ブラウザは標準と互換の差があるのかどうかもよく判らないが、IEはWinもMacも標準と互換でかなり癖が違う。しかも。Win版とMac版ではそれぞれ全然違う癖なのだ！……一体何者ですかIE。
IEの標準モードと互換モード、どちらを選ぶかは人によると思うので一概に言えず。ただ、MacIEについては標準モードの方がまだましな気がした。
あうー長文…。日記形式ブログで解説もどきは無理があるな…テンプレ変えないと読みにくそうだ。
WinIEとMacIEの癖については次に続く。
クロスブラウザ
2006.04.19 ｜Category …ばろむわん
クロスブラウザ。
色々なWebブラウザで意図通りのページ表示をさせること。多分。（何）
ブログカスタマイズに嵌ってこの領域に入り込むと、あら不思議。人によっては出て来れなくなります。富士の裾野の樹海の如く。自分のことですが。
ここ始めてそろそろ３ヶ月か。
新規テンプレからMacIEでも崩れないものを作る方策を忘れないうちにまとめとこ…。
とは言え何から書いたものか。系統立った記事なんて書けないしな。
通りすがりのどなたか、ネタ提供プリーズ。
取り敢えず自分のパソ環境。
・MacOS9.2.2（IE5.1.7、Netscape7.02、iCab3.0）
・WindowsXP（IE6.0以下略、Firefox1.5）
OSXは不所持。XP以前も解らず。なので他環境からのご意見は歓迎の上謹聴致しますが、質問されても対応法は多分判りません。どちらかというと教えを乞いたく。
解析の検索ワードからネタ拾うか、順番にやっていくか…まぁ、ぼちぼちと。
色々なWebブラウザで意図通りのページ表示をさせること。多分。（何）
ブログカスタマイズに嵌ってこの領域に入り込むと、あら不思議。人によっては出て来れなくなります。富士の裾野の樹海の如く。自分のことですが。
ここ始めてそろそろ３ヶ月か。
新規テンプレからMacIEでも崩れないものを作る方策を忘れないうちにまとめとこ…。
とは言え何から書いたものか。系統立った記事なんて書けないしな。
通りすがりのどなたか、ネタ提供プリーズ。
取り敢えず自分のパソ環境。
・MacOS9.2.2（IE5.1.7、Netscape7.02、iCab3.0）
・WindowsXP（IE6.0以下略、Firefox1.5）
OSXは不所持。XP以前も解らず。なので他環境からのご意見は歓迎の上謹聴致しますが、質問されても対応法は多分判りません。どちらかというと教えを乞いたく。
解析の検索ワードからネタ拾うか、順番にやっていくか…まぁ、ぼちぼちと。