Hobby > デザイン実験室 > Introduction

Introductionというほど大げさなものではないですが,CSSを使うときに引っかかりそうなポイントをまとめました.というよりも私が引っかかったものを覚え書きとしてまとめたというのが正確なところです.主にInternet Explorer(Trident系)で読み込むときの注意(注意しなければならないほどバグが多いとも言えますが)を中心に扱っています.

IE6のfloatプロパティバグ

IE6では背景色の設定された要素内(A)に,floatプロパティの設定された要素(B)がある場合,要素Bが消えるというバグがあります.以下の定義型リストでは2つのdd要素にそれぞれ「floatのみ」と「float+position」の2つのプロパティをstyle属性で指定しています.IE6の場合は「"float: left;"のみを指定したDD」が見えなくなっているはずです.

floatプロパティとpositionプロパティのテスト
"float: left;"のみを指定したDD
"float: left; position: relative;"を指定したDD

このバグは他にも親要素にwidthプロパティやheightプロパティを指定することで回避できます.

jump to pagetop

IEでのwidth解釈バグ

IEにはwidthの解釈に間違いがあります.より正確に言うと,XML宣言<?xml version="1.0" encoding="utf-8"?>のある文書を強制的に後方互換モードで解釈してしまうというIE6のバグが原因です.標準準拠のXHTMLを書いたのに解釈バグ満載の後方互換モードでしか解釈されないのでは意味がありませんし,これを知らないとIE以外のブラウザで表示確認をして修正をしたときにはまります.IEでOK→Firefoxでずれる→Firefoxで修正→FirefoxでOK→IEでずれる→IEで修正→以降繰り返し・・・となって無限ループです.以下のようなCSSを書いた場合の正しい解釈と間違った解釈を画像で示します.

p       {
    width: 200px;
    padding: 10px;
    border: 10px solid #aaa;
    }
widthの正しい解釈と間違った解釈
P要素が200px,合計で240pxになる正しい解釈正しい解釈:P要素 200px+左右のpadding 20px+左右のborder 20px,合計で240px
borderまでを含めて200pxになっている間違った解釈間違った解釈:borderまでを含めて200pxになっていて,P要素は160pxしかない

このバグを回避するには,1.xml宣言を書かずに標準モードでソースを読み込ませる,2.widthとpaddingとborderをひとつの要素に指定せず分散させる,という2つの方法があります.MovableTypeのテンプレートなどでは1の方法を使って回避しているようです.2の方法を使う場合,例えばUL要素に"width: 200px;",LI要素に"padding: 10px;"というように分散させることでLI要素がはみ出るのを防ぐことができます.また2の方法を使うと後方互換と標準準拠の違いを考えなくていいという点でメリットがあります.

jump to pagetop

positionプロパティをabsoluteにするときの注意

ある要素に"position: absolute;"を指定するときには,その親となる要素に"position: relative/absolute/fixed;"のいずれかが指定されていないとページ全体に対する絶対位置指定になってしまいます.

<body>
  <div class="parent">  ←h1から見た親要素
    <h1 class="child">example1</h1>  ←子要素
  </div>
</body>

例えば上のようなソースを書いてh1に"position: absolute;"を指定したとします.親要素であるdivに"position: relative;"が指定されていない場合,h1が表示されるのはbodyに対する絶対位置です."position: relative;"が指定されている場合はdivに対する絶対位置で指定されることになります.

jump to pagetop

条件付きコメントのTips

<!--[if lte IE 6]>読み込ませたい内容<![endif]-->とすることでIEのバージョン毎に読み込ませる内容を変えることができる条件付きコメント.Firefoxなどのブラウザではこれを通常のコメントとして無視してしまうという問題があります,次のように記述することで問題を回避できます.以下のソースはIE7かどうかで振り分ける場合の記述です. <!--[if IE 7]><!-->読み込ませたい内容<!--<![endif]--> このように記述すると<!-->の部分がダブルミーニングになって,Firefoxなどでは次のように見えることになります.IE7の場合は[if IE 7]>から<![endif]までが読み込まれるのでやはり次のように見えることになります. <!--[if IE 7]><!-->読み込ませたい内容<!--<![endif]--> 一方でIE6では[if IE 7]>から<![endif]までが読み込まれなくなるので,次のように見えます. <!--[if IE 7]><!-->読み込ませたい内容<!--<![endif]--> このサイトにあるフライアウトメニューやプルダウンメニューはこれを使って実現しています.かなりソースがややこしくなりますが,スクリプトを読み込むときに対応していないブラウザをはじいて別のソースを読ませるなどの有効な使い方があるかもしれません.

jump to pagetop