tableのセルの高さを色んなブラウザでぴったり揃える方法

例えば、カレンダーのようなものをテーブルで組みたいとき。
tdに高さを設定しても、ブラウザによって高さに差ができる。
というか、指定した通りの高さにならない。
td内での上下の余白が適当な事になっているのかもしれない。
見る環境によって文字の大きさが変わってしまうことを考えれば、崩れる可能性が高い…。

この場合はtdには高さを指定せず、中に入るテキストに対し、line-heightを指定すればいい。
tdの高さは内容物に合わせて伸びるので、ほとんどのブラウザで高さが揃う。
テキストが2行でセルの高さが50pxなら、line-heightを25pxにすればいいし、
line-heightを10pxにして、上下のpaddingの合計を30pxに。
内容物の合計が50pxになれば大丈夫。
これなら、文字の大きさが変わっても(極端に大きな文字にされない限り)平気。

id名やclass名の先頭の文字が数字だと、cssの記述が無効になる

●問題
さっきまで何の問題もなく使用できていたcss、
idの記述を増やした途端適応されなくなった。

●解決
id名やclass名の先頭の文字を数字にしてしまう(例：id="10kajou")と、
そのid名やclass名を使って指定したプロパティは無効になる。
先頭以外を数字にする分には問題ない。

●その他
正確には
”使用できる文字は大小アルファベットと数字 [A-Za-z0-9] 、ASCII以外のUnicode文字、およびハイフン（-）とアンダースコア（_）に限る。識別名は数字もしくはハイフンと数字の組合せで始めることはできない。また、セレクタの要素型名、クラス名、ID名はハイフンで始めることはできない”
http://www.kanzaki.com/docs/html/htminfo17.html

要素の重なり順を制御する

●問題
css2.1で自由に色を変えることができる角丸のボックスを実現するため、
四角を角丸でくりぬいたような透過画像を、position:absolute; bottom:0;でbox内下よせで配置したら、
画像がテキストにかぶさってしまい、リンクや選択ができなくなった。

●解決法
imgをテキストより先に記述すれば、
</body>に近い記述が、重なり順の上になるので、テキストをクリックできる。
しかし、その場合は一部のブラウザでテキストの上側に余計な余白が表示されてしまう。

そこで、cssでz-indexを指定すれば問題なく解決できる。
z-indexは要素の重なり順を制御するプロパティで、
position:static以外を指定した要素に有効である。
img {z-index:2}　のように指定し、数字が大きい方の重なり順が上になる。
IE6等のブラウザでも問題なく使う事が出来る。

●その他
角丸はCSS3で正式に実装されるが、
対応ブラウザのシェアの関係上、仕事で使うのは当分無理。