CSS_trial and error
Friday, Apr 22, 2005 - 01:12 +09:00
各ブラウザのバグリスト。CSSとブラウザに関するあれこれ。数多あるバグをひとつひとつ挙げていくと切りがないので、Sig.の書き方でよく直面する問題に限定しています。
Internet Explorer 5/6
IE5はCSSの致命的なバグを多く含み、続くIE6も公開当初こそ優れたブラウザでしたが、今となっては古いブラウザなので問題も多いです。OS標準のブラウザであるということで圧倒的なシェアを誇り、１つ古いバージョンのIE5ですら、未だに無視できない存在です。
逆に言えば、OS標準であるという利点をもってユーザーのバージョンアップは比較的順調（半強制的でもあるが）に進んでおり、おかげでIE4以前の極端に古いバージョンは、ほぼ無視できます。
- DOCTYPE宣言を最上部に置かないと互換モードになる （IE6）
- これが問題となるのは、主にXHTMLでXML宣言を記述する時。XHTMLの仕様では、HTML文書の先頭でXML宣言を記述しなければならない。ただ、IE6は互換モードの方が表示が速いため、テーブルや画像を多く使うサイトでは敢えて互換モードを選択する場合もある。IE6の互換モードはIE5.xに似た挙動を示すため、IE5対策の手間も省ける。
- ボックスが小さくなる （IE5.0/5.5）
- CSSの仕様に対するIEの間違った解釈。「width」はCSS2の仕様ではコンテンツ領域のみの値。それがIE5.xだと、「padding」と「border」を含んだ値となります。対策としては、「width」と「padding/border」を同時に指定しないこと。あるいは、Hackを使用してIE5.ｘ用の値を別に指定することが挙げられます。
- 文字サイズが一回り大きくなる （IE4～5.5/Mac版IE4）
- IE5は、本来はデフォルトサイズを表す「font-size="3"」をキーワードで下から３つ目の「small」として扱ったため。これは文字サイズをキーワード以外で指定すれば問題ありません。フォントサイズをキーワードで指定したい場合は、IE5.x用に偽の値を用意する必要があります。
- 「margin:auto」でセンタリングできない （IE4～5.5）
- 左右マージンの値を「auto」にすると、ボックスの中央揃えが可能になります。この手法は非推奨の<center>タグに代わる方法として一般的ですが、IE5.x以前では無効となります。IE5.xでもボックスの中央揃えを実現するためには、<body>要素に「text-align:center」を指定する必要があります。
- <a>要素を「display:block」にすると改行が入る （IE5/6）
- <a>要素の「display:block」はリンク領域を横幅いっぱいにするための指定。リスト内のアンカーに対して使用すると、IEではもれなく改行がついてきます。これは「width:100%」などと幅を指定してやれば回避できます。ボックス関連にバグが多いIEですが、大抵は「width/height」の指定で回避できます。
- 幅をパーセント指定したfloatの段組が崩れる （IE5～6/Mac版IE5.x）
- リキッドレイアウトを組もうとしたときに良くぶつかる問題。どうもパーセント値をピクセルに変換する部分に問題があるらしく、合計が100%になる段組は巧く表示されない。回避策は、合計値を少なくすること。97%程度でも表示が崩れる場合がある。ホワイトスペースだと割り切った柔軟なレイアウトが必要。
- PNG画像が巧く表示されない （Windows版のIE）
- 正確には、PNG画像の透過処理に対応していない。バージョン４世代より後で透過PNGに対応していないブラウザはWindows版のIEだけ。困ったもんです。透過PNGを使いたい場合は、Hackを利用すると良いでしょう。
Opera 7/6
当初からWeb標準に則ってデザインされたブラウザ。
他に類を見ない便利な機能を多く持ち、仕様に対しても先進的。
とはいえOpera6にはバグが多く、互換作業は少々面倒。Opera7は優秀で、仕様に従う限り目立った問題はないです。日本語版としてローカライズされたのはOpera6からなので、日本での閲覧が前提ならOpera6以後を対象とすれば良い。
- 背景色に「transparent」が適用されない （Opera6）
- 「background」で一括指定する際に背景色を指定しない、もしくは「transparent」にすると、Opera6ではデフォルトの「transparent」（透明色）になりません。背景色を透明にするには、「background-color:transparent」と再指定する必要があります。
- 「float」要素が下方にずれる （Opera6）
- Opera6には、floatに関するバグが多い。この場合は、floatに対応したclearを指定してやると回避できる。他にもfloat要素に「width」を指定していないと、ウィンドウ幅を超えて無限に回り込んでしまったりもする。
- a:link、a:visited、a:hoverが巧く適用されない （Opera6）
- 「a:link」の指定を「;visited」や「:hover」で上書きできなかったり、逆に上書きされたりする。つまりプロパティの継承に問題があるのですが、まったく関係のない挙動を示したりもします。文字色/背景色や下線/上線装飾など、比較的単純な指定なら問題は少ないのですが、背景画像を切り替えたり、ずらしたりといった複雑な指定では数々の問題が発生します。
- リスト内<a>要素の下線装飾が上線装飾になる （Opera6）
- <a>要素を「display:block」とした時に発生します。正確には上線装飾でなく、「border-top:1px」のようです。上線を消すことは「!important」を併用すれば可能ですが、下線を表示させることは難しい。というかできないっぽい？
- 「content」属性で文字参照が理解されない （Opera6）
- バグではなく、仕様。「content」プロパティで特別なテキストを生成する場合、CSS2の仕様ではHTML/XHTMLの文字参照ではなくエスケープシーケンスを使用します。CSS2のエスケープシーケンスはHTML/XHTMLの文字数値参照から簡単に変換することが可能です。
「&#」で始まる10進数値を、「\」で始まる16進数値に置換すれば良い。「»」の場合だと、文字数値参照は「»」、CSS2のエスケープシーケンスは「\BB;」となります。10進数値から16進数値への置換は、OS付属の電卓ツールを使用すれば簡単です。 - 「background-position」でキーワードが利用できない （Opera6）
- top/right/center/left/bottomのキーワードを使用するときの不具合。いつもいつも使えないという訳ではなく、使えるときは使えるようです。「%」も同様。
Mozilla 1.6
米ネットスケープ社が公開したソースコードを出発点に、オープンソースで開発されたブラウザ。クロスプラットフォームであり、OS間の違いを極力抑えるように設計されています。Web標準に準拠。後述するFirefoxの前身。
- Mozilla1.6でメイン・ナビゲーション背景画像の重複
- 当サイトで確認済み。解決策は調査中...
Firefox 1.0
高い精度でWeb標準の水準を満たした、とても優秀なブラウザ。後発のブラウザにとって模範となりうるレンダリングを誇り、W3Cの仕様に従う限り、描画において大きな問題は見当たりません。
オープンソースであるが故に高い拡張性を誇り、フリーで公開されている幾つかのツールは制作者にとっても非常に有用。IEとの乗り換えを意識して多くのショートカットはIEに倣っている。追加できる幾つかの機能にはOperaに由来するものもあり、商用ベースのOperaとしてはお株を奪われた感あり。
- ナビゲーションに謎の線が表示される
- 「text-indent」でテキストを画面外に退避させ、背景画像でナビゲーションをデザインする手法は広く知られています。ただしFirefoxでは<a>要素に「text-decoration:none」を指定していない場合、下線装飾が画面外まで追いかけていくことがあります。
posted in HTML/CSS Trackback (0)
Trackback
- このエントリーのトラックバックURL
- http://rospear.info/other/mt-tb.cgi/14