先の、font-size:62.5%　を使う際に、
デフォルトが16でないものをチェックしないとと思い整理。

参考サイトさまは↓こちら
http://www.webbibo.com/stylesheet/font/default_font.html
ブラウザのデフォルトフォントサイズを取得まであって便利です！

Windows
ブラウザ |プロポーショナル| 等幅
IE 8.0 |16px |16px
IE 7.0 |16px |16px
IE 6.0 |16px |16px
Firefox 3.0 | 16px |16px
Firefox 2.0 |16px |16px
Opera 9.0 |16px |16px
Safari 3.0 |16px |13px
Netscape 7 |16px |16px

※ウィンドウズは等幅を使わなければ、問題なさそうですね。

問題はMac、無視するか？

Macintosh
ブラウザ |プロポーショナル | 等幅
Safari |16px | 13px
Firefox 3.0 |16px |16px
Firefox 2.0 |14px |14px
Firefox 1.0 |14px |14px
Opera 9.0 |16px |16px
Netscape 7 |14px | 14px
IE 5.2 16px |16px

body { font-size: 62.5% }
すると、12 pixelsは、1.2emと指定、9 pixelsは、0.9emと指定するとそれ相当になる。

わかりやすくて便利と手法。

そもそも、(16 x 62.5% = 10)　という計算なので、
bodyでfont-size: 10px;　として、
デフォルトフォントサイズが16でないものには、
ハックをかけるとパーフェクトなのでしょう。
　

元の記事はこちら
http://www.netmag.co.uk/zine/design-tutorials/20-pro-tips


a { outline: none; }

表題どおり。。

utf-8 だと、
IE6、IE5で、ｃｓｓを読んでくれない！

問題は、文字コードでした。
.css の方が Shift_JIS であることが問題。

うっかり、ベースに作っておいた、import.css　を流用してたら、utf-8で書いていたつもりが、
Shift_JISでした。。。

参考ページ　http://heipooh.jugem.jp/?eid=98

ボックス内にimg要素を配置した時の余白

画像ばかりのページをコーディングする際に、
画像をpタグで囲み、ますが、

ｐとimgに margin:0; padding:0;
を入れても、ブラウザにより無駄な余白ができてしまう。

対処法として、pタグにfont:0px　という方法を以前発見し、
しばらくそれを使っていましたが、
クロームやオペラで余白があく場合があるし、0ｐｘと言うのもどうもいただけない。

最終的な対処法は、
imgタグに vertical-align:bottom;
と入れる。

もしくは、
imgタグに display:block;
と入れる。

前者の方がスマートかな。

Firefoxで、画像置換したテキストリンク　-9999pxとかをしていと、

そのリンク画像をクリックした瞬間に、点線がでる。

その対応策　overflow: hidden;　を入れますが、Ｍａｃなどのバグ？でもう少し対応が必要。

　 /*\*/
　 overflow: hidden;
　 /**/

詳細はコチラ様サイトと参照　　katt weblog リンク画像をクリックしたときに表示される点線を解決！（消す）

たびたび遭遇する、「CSSでfloatを指定したボックスを含むボックスの背景が出なくなる」これ。

対応策を書かれているサイト様メモ

CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件