スタイルシート、JavaScript、DOM、ブラウザ判別、PHP 等ウェブ制作関連の各種情報
ほとんど CSS に関することですが、とりあえずなんでも。あとで整理。普通に作っててよくハマるので、注意すること。
これらはほとんど、フロート、ポジショニング、サイズ指定の絡みで発生。上位ブロックのwidth （または height）が、ブラウザまかせのときに発生するとみた。パーセントを使った相対指定のとき、現状の CSS仕様では「ブラウザまかせ」にどうしてもなる箇所がでてくるので（本来、まかせられるならまかせたほうが良いはずなんだけど）そういう箇所で思いもよらない状況を作り出してくれるのが IE6。
数値でキッチリ指定して、幅100% にした横分割ブロック等でも、ウインドウサイズ変更で不安定。これ一番困る。通常対応策は「数値に余裕を持つ」こと。「パーセントでのブラウザまかせ」は例えば、現在の仕様ではボーダーはパーセントで幅指定できないので、ブロックの左右にボーダーいれたらトータル 100% とかにしたいときに困る（ボーダーはピクセル指定）。
わざと予定をハミだした箇所を、overflow:hidden で隠す、という方法もあります。ただし、マックIEで、overflow:hidden のバグがあるので、シート分けます。
他が「仕様書通り」で問題ないんだから、「仕様書通り」でいうこときかないものに合わせる訳にはいきません。ブラウザ判別、専用スタイルシートの用意が可能であれば、通常シートの後に IE6 用シートをカスケードして、該当箇所を上書きします。場合によっては、その IE6用にクラス指定をいれることも必要。
Windowsでは、HTML上で条件分岐コメントによる判別が使えます。んが、他に影響ないとはいえ、独自拡張仕様なんで他の方法があればそっちにしましょう。
IE5.xは、標準準拠ではない点を除けば、ある程度安定した（セキュリティとかは知らん）ブラウザだったのかもしれません。IE6 で発生するバグで以前は現れなかったものもあります。まぁ、未対応で整備されていなかったら、バグもなかったといえます。
現在は「先を見れば」標準準拠仕様で記述するべきでしょうから、その場合に表示互換をとるために処理が必要になります。ユーザーがまだまだ多い点や（セキュリティ対策をメーカーがやめて、サポート外になってますから、使わないほうがいいに決まってるのですが）、スタイルシート対応はある程度進んでいるので、自分の場合、いちお対策をとるようにしてます。ネットスケープ4 等とは違って、ほとんど専用シート上書き処理で済みますし。面倒くさいですが。
互換モードで記述する分には、基準となるブラウザかもしれません。
font-family で日本語書体を指定せず、英語書体だけの指定のとき、フォーム関係要素内のテキストが文字化けする。これらの対策は、CSS Hints for Internet Explorer 5 にまとめられています。Apple の原文リソースはなくなった模様。
5.0を5.1以降にアップデートするのはなんら問題ない筈なので、5.0 だけでおかしな箇所は対策しません。
ブロック指定関係のバグはフロート絡み、またはポジショニング指定で relative なんかを利用した場合だと思われます。なんだかんだいっていつも解決できているので思い出したら追記します（笑）
文字化け関係はスタイルシート側に日本語書体を指定し、該当要素の HTML 側に lang 属性をいれることで解決できます。英語書体を指定し、英語書体を利用したい時には lang="en" をいれることで反映されます。以前よくページの最後の要素で英語書体になる指定をいれるとソース表示が全部文字化けする状況にはまったことがあります。lang 属性をかませる箇所を変えることで直りました。
通常制作環境がウインドウズの方は、Firefox 等で表示チェックをすることで Safari は基本的に大丈夫だと思いますが、IE に関しては他のブラウザと異なるいやらしいバグを抱えているのでチェック環境を構築するか、必ず知人のマック使いをつかまえて見てもらえるようにしておきましょう。
開発完了したものだし、OSX 環境ではデフォルトブラウザから外れたので、今後ユーザーはどんどん減りますが、自分周辺を見てもマックユーザーで OS9 環境利用者はまだまだいる（それもデザイン関係者に多い）ので可能な限り対処してあげたい（笑）ものです。今後減るにしてもだからこそ今のうちひととおり危険なバグについて知っておく事とその対処法を覚えておくほうがいいんじゃないかと思います。最終的には @media 使ってスタイルシートを全く適用させない手段があるので、きっと数年後には自分はそうするだろうとも考えていますが。
他のブラウザ、Mozillaや、Safariというヤツラは、標準準拠がウリです。よっぽどややこしいことをしないぶんには、問題となりうることが発生しません。いや、コイツラで問題発生しないように作るのが基本じゃないかと。
「Safariだとヘンになる」「ネットスケープだとヘンになる」という場合は、ほとんどが記述に無理があるもの、または「標準仕様を理解していない」状況じゃないですかね。「IE6 で完璧」なスタイルシートは、他全てでヘンになったりしますよ。制作者が基準にするブラウザはなんだっていいかもしれませんが、IE基準で他に別シートリンクするより逆のほうが楽です。IE5 基準なんてことする状況はないと思いますが、その場合は例の文書型宣言とブラウザ別モードで互換モードにしておかなきゃ泣けるレイアウトになります。
そうはいっても自分はアタマの中を整理しながら描いているレイアウト等を仕様に沿って記述して思うようにいかない状況はあります。自分用へのメモですが、例えば、
background-repeat: no-repeat; なのに repeat 状態のように背景画像が見えてしまう（Safari）position: fixed 指定のブロックは、min-width がきかないの？（このサイトの今のホーム）line-height の相対値指定の扱い（たぶん Mozilla 系）font-family 指定に依存）のは Mozilla だって！これらは状況によって対処可能であれば対処します。基本的に指定自体を避ける方向で制作します。Safari のヤツなんかは background-position が top left (0 0) 以外の場合とか。多分に「スタイルシートのおかげで楽になる」状況のための処理だったりするから多少の面倒な（普通の）手法に戻す等で対処。
<div align="center">という記述は、推奨しないってことになってます。ていうか、align属性はどんな要素上でも推奨されてません。それと同等の仕様準拠記述はどうするのか、とよく聞かれるので。ページ全体をブロックとして、センタリングするときの一番簡単な方法。昔のブラウザ用に別シートを用意しなくてもいい方法。
body { text-align: center; }を記述。body要素直下にdivブロックを作って、通常コンテンツはその中に仕込む。align属性じゃなくて、classかidを指定。divブロックのclassまたはidのスタイルを、margin: x(任意) auto; text-align: left; width:xxx%（任意。ピクセル可能）とする。左右マージンをautoにすると、仕様通りのヤツはそのブロックをセンタリングしますが、古いのはならない点を考慮。そして本来text-alignは指定したブロック内にあるインライン要素に適用されるもので、ブロックレベル要素に反映するのはオカシイのですが、古いヤツはしてしまうので、センタリングするブロックの上位ブロックでtext-align:centerとする。ほんで、正しい処理をするヤツは、それだと、センタリングさせるブロック内のインライン要素に効いてしまうので、そのブロックでtext-align:leftとすることで姿勢をただしてやります。
ここでのbodyを「センタリングさせるブロックの上位ブロック」とすれば、文書内中途のブロックでも同様です。該当ブロックがテーブルでも同じ。
2004年10月28日 08:23
フリーのウェブサイトディレクター。音響オペレーター。北海道札幌にて活動中。
Web Site designed by Studio Susto