ブラウザで異なるCSSの効果
2004年 12月 24日
|
▼
スキンを作った時、私はMacのSafari、IE、Netscape、Firefoxの四種で確認します。
で、気付いた事をメモ。
で、気付いた事をメモ。
- Safariでは、tableタグに対してmargin指定を入れた場合、何故だか効かないことがあり(^^;
効く場合があるのか、ないのか、効かないのはどういう条件の時か定かではないのですが、今日作ったスキンでは効きませんでした。
仕方ないのでtable全体をdivで括ってpadding指定をいれるという間抜けなことに。
またSafariでは、<B>や<I>のフォントタグが無視されます。
- IEではcenter指定やtext-align:center; あるいは right;が効きません。
中身がテキストだけなら効きますが、中にdivやtableが入れ子だと無視して左寄せになります。
この場合、センターにしたい時は中に入るdivやtableにmargin:auto;を入れておくとセンタリングされます。
右寄せにしたい場合は、table組むとか姑息な技を使うしかありません_| ̄|○
- Netscapeでは、tableのtdに対して、背景画像を指定し、なおかつbackground-attachment:fixed;を指定した場合、セルの中身が途中で終わっていると、そこまでしか背景が出てきません。
例えば右メニューの部分を縦に全部画像を入れたい時など、左側本文部分がメニューより長くなっている場合、メニューの入ったセル(TD)の中身は途中で終わり、下に空白ができます。
そこに背景色なら全部その色になるのに、背景画像の場合はfixed(背景画像はスクロールせずに固定)を指定していると、空白部分は背景まで空白に(^^;
従ってattachmentの指定は入れないようにしなくてはいけません。
スクロールしたくないという時はNetscapeでは途中で切れるのは諦めるしかありません。
- Firefoxでは、ページや中身の一番外側のdivやtableに幅の指定を入れていない、あるいは100%を指定している場合(私はよくやります。モニタやウィンドウのサイズにあわせて変わってくれるからです)、何故か、プレビューで見た時に突然横スクロールが発生します。
あれ、間違えたかな?と思って編集画面に入り、もう一度プレビューするときちんとウィンドウの幅に収まっていて、???と思いつつ何も変えずに閉じ、もう一度マイスキンの一覧の方からプレビューすると今度は収まっていたりします。
100%というのをモニタ全体に対してか、ウィンドウに対してか、解釈が不安定なのだと思われます(普通ウィンドウに対してで、モニタ全体に対して指定するなんてアホな話がとは思うんですが)
- おまけにWin IEについて。
divやtableに対して、背景画像を位置指定して固定したい場合。
一番上、左端や上端だけ繰り返しならいいんですが。
下一列や下端のどこかに繰り返さずに固定したい場合、位置指定を100%あるいはbottomとするのですが、この解釈がMacと異なります。
Macだと、どのブラウザでもウィンドウの下端を100%と解釈し、常にウィンドウの下端には画像が出てます。
しかしWin IEだと、tableあるいはdivの下端と解釈します。
従って、縦に長いページでスクロールしないとtableやdivの最後が出てこない場合、背景画像もそれまで出てきません(^^;
かなり悪戦苦闘しましたが、諦めました。
bodyに対してなら大丈夫なんですが、背景をいくつも重ねたい場合はdivを使って重ねていくしかなく、つまりお手上げってことです...( = =) トオイメ
それで私は一つスキンの公開を諦めております。
(全体に障子柄を繰り返し、ページ下端にだけ畳を繰り返し、その畳の上一カ所に火鉢の画像を固定して和室のような背景とするスキンなんです)
もしどなかた良い方法知っておられたら教えて下さい。
- 更に判明_| ̄|○
Operaで見てみたところ、やはりdivやtableに対して、背景画像の指定にfixedを入れていると、切れているどころか、最初の状態、つまり一切スクロールしない状態で出た範囲にしか背景画像が出ませんでした。
なのでちょっとでも画面をスクロールさせると、背景画像が途切れて、しまいには消え去ります...( = =) トオイメ
本日の教訓。body以外には背景画像の余計な指定はいれない。
attachmentは禁忌。多分、positionも入れない方が賢い。repeatだってない方がいいかも_| ̄|○
by catsmoon
| 2004-12-24 22:36
| スキン編集
▲