prog*sig

最終章
Category_ブラウザ共通

■Theme 001　背景またはボーダーが表示されない／内容がはみ出る

clearfixを使えって話

■Theme 002　画像の下に隙間ができる

なぜ、少し隙間ができるかというとテキストの表示がベースラインとなっているので(デフォルト)、ディセンダ(文字が下に少しはみ出る分)の領域が空いてしまっている。
そのため、vertical-alignをtext-bottomに合わせることでimgの隙間もなくなる。
これはインライン要素に対して起こる事なのでdisplay:blockなどでブロック要素にすることでも回避できる。

■Theme 003　一括指定のプロパティを使うとそれ以前の個別の指定がクリアされる

backgroundのように一括でプロパティを指定できるものをショートハンドプロパティと言って、それらで指定しなかったプロパティ部分は初期値にリセットされる。
省略した部分のプロパティを維持したり受け継いだりはしないで毎回初期値に設定される。

■Theme 004　後から指定したCSSが優先して適用されない

固有性の話。

/* こっちの方が固有性が高い*/
#nav a{
    color : #ccc;
}
/* こっちは無視される */
a:link{
    color : #fdd;
}

このように意図しないところで上書きがおる可能性がある。
そのため#nav aを指定したら#nav a:linkも指定するなどルールを設けるといい。

■Theme 005　「a:hover」がリンク以外にも適用される

a:hoverでホバー色を指定したときに、アンカーによるジャンプ先にも適応されてしまう件
これは「a:hoverがname属性を指定したa要素に適応される」という仕様のためです(IEではならないけど)
a[href]:hoverとすれば解決…だがIE6以下は動かないので、以下の3つの方法があります。

• a nameを使わない

これはnameの代わりにidを使うというものです。
nameの方が普通じゃないのかと思ったりしますが、実はnameは下位互換のために残されているものであってXHTMLでは本来アンカーにid属性を指定することになっています。
そのため、a id="content"... のようにidで指定するようにする方がいい。
ただしXHTML側をいじらないと行けないので、既にあるものは他の方法でも代用できる

• aたん:hoverで元の色に戻す

a:hoverで色を決めた後、アンカーのaにはaたん:hoverで色を上書きするという方法。
ものすごく古いブラウザでも動く方法
ただ面倒ですね

• a:link:hoverのように指定する方法

a:link:hoverで色を指定すれば、リンクになっているつまりa:link:hover = a[href]:hoverとなるので、簡単にCSSだけで色を指定できます。
同じようにa:visit:hoverも指定すればCSS側をいじるだけでリンクhover色を変更できます。

■Theme 006　％で指定した文字サイズがブラウザによって違う

ブラウザによって%での変化する値が違うという話

■Theme 007　キーワードで指定した文字サイズが1段階大きく表示される

トリビア
元々HTMLでは<font size="3"></font>というものがあって、1-7のサイズの中でデフォルト値が3でした。
CSSではxx-small,x-small,small,medium,large,x-large,xx-largeというキーワードで文字サイズを定義しました。この中ではmediumつまり4番目の値がデフォルト値となるわけですが、下位互換表示の際はmediumが<font size="4">に相当しているために文字サイズが1つ大きくなってしまう。
＊IE5.5以下の話なのであまり気にすることない

■Theme 008　「text-align: justify;」で両端揃えにならない

CSS3にtext-justify:inter-ideograph;という日本語でも両端揃えするものがあるよ。

■Theme 009　リスト項目の先頭の記号を画像にしたら縦位置がずれる

list-style-imageプロパティはずれてしまうので、background-positionで細かい調整ができる背景画像としてリスト画像を表示しましょう。

Category_ブラウザ別

■Theme 011　IEでナビゲーションの各項目の間に隙間ができる

IE6以前だとliの後の改行の隙間ができてしまうのでhasLayoutをtrueにして解決

■Theme 012　IEでfloatやposition、displayの指定に関連して問題が発生する

float指定してるのになぜかめり込んでしまうという時。
親要素に対してhasLayoutをtrueにする処理をすれば大体解決する。(強引っすね

■Theme 013　IEで幅を%指定したfloatの段組の表示が崩れる

左50%右50%としたときになぜか段組がずれてしまう、そういうときの解決策。
IE限定でウィンドウサイズを変えたりたまにずれたりするらしい。
ちなみにMac IE5.xの場合幅の合計が100%になると爆発する。

• 幅の合計が100%以下になるようにする。

48%と48%のように少し小さめに設定して、左右にmargin:autoをかけば自然に真ん中に表示できる。

• 親要素に1pxのpaddingを設定。

要素を両方ともfloat:left;しているときに、
親要素bodyなどにpadding-right:1px;などを設定するとずれなくなる。

• 最後のダンに-1pxのmarginを指定する。

両方の要素をfloat:right;しているときに、後の方にくる要素にmargin-left:-1px;をするとずれなくなる。

何か黒魔術的ですね。

■Theme 014　IEで入力フィールドの文字サイズが固定になっている

IEではinputやtextareaは一般のテキストとは別扱いされているので、全体のフォントサイズを変えた場合inputやtextareaはデフォルトの文字サイズのままになってしまう。
そんなときはinputやtextareaに対して相対値で文字サイズを指定すると周りと同じサイズになる。

/* 意味なく見えるが一般のテキストと連動したサイズになる*/
input ,textarea{
    font-size:1em;
}

■Theme 015　IE7でXHTMLのコメントもセレクタの対象となってしまう

IEはコメントノードに対してもCSSが適応されてしまう。
つまりfirst-childや隣接セレクタを使う時は気をつけましょう。
JavaScriptと同じ仕様っぽいですね。

■Theme 016　IE6以前でfloatに指定したマージンが2倍になる

float指定したものにmargin指定するとなぜか2倍のmarginになる現象。
display:inline;で解決。
この辺は遭遇したら調べましょう。

■Theme 018　IE6以前で固定配置が無効になる

いわゆるposition:fixed;をIE6でも使う方法。
大まかな流れ。
bodyをheight:100%;overflow:hidden;にしてスクロールできないようにする。

* html body {
   height:100%;
   overflow:hidden;
}

スクロールできないと困るので、bodyの中のfixedしたい要素以外を包む(#container)をもう一度overflow:auto;にしてスクロールバーを出す。

* html #container {
   height:100%;
   overflow:auto;
}

そしてfixedしたい要素(#sample)をposition:absolute;とrightなどを組み合わせて、bodyの中で常に同じ位置にするとposition:fixed;が再現できる。

* html div#sample {
   position:absolute;
   right:16px;
}

かなり無理矢理で、XHTML側も工夫しないと行けないのでjsで良いかもしれませんね。

• IE6でもposition:fixedと同じ動作をさせる(改訂版） - CSSデザインノート

以上でXHTML+CSS虎の巻終了。
CSSハックが必要なものの7割ぐらいはIE6に対してだったような気もします。