メモ　バインダー

CSSでheightを指定し、overflowを指定した場合、IEのみheightからはみでる場合がある。
これは、子要素にposition: relative;を使用していた場合に発生する。
この場合、親要素にもposition: relative;を指定してあげると、上手くいく場合が多い。

Safariのみ適用するCSS hackは幾つかあるが、Windows Safariでも確認できるのが
html[xmlns*=""] body:last-child #name{}

正式リリースされたIE8のCSSハック。

例
#name p{
padding: 2px;
}

html>/**/body #name p{
 padding /*\**/: 1px 1px 1px 1px\9;
}

IE TESTERのIE8でも確認可能。

#name{
すべてのブラウザに適用するハック
}

*:first-child+html #name {
IE7のみに適用するハック
}

IE8が正式リリースされたが、商用サイトでIE全体の3%～5%、WEB系情報サイトでIE全体の8%～10%程度。ブラウザ全体では2%～8%程度。まだまだ、[Internet Explorer 8のデザイン崩れを回避するメタタグ]でIE7に落とした方が安全かもしれない。

Firefoxでfloat&aタグの組み合わせではリンクをクリック時（a:active）に、横に点線が表示されてしまう。特に問題がないが、これを消すにはoutline:noneを指定してやれば良い。

ただし、この方法だと、クリック時に画像まわりの点線も消えてしまうので、デザイン上、どちらが良いか選択する必要あがる。
なお、どうしても画像まわりに点線を出して綺麗に表示したい場合は、widthとheightを指定し、overflow:hiddenかdisplay:noneとの組み合わせで表示させるのがベター。

高さ固定でインラインフレームのように見せるのがoverflow:autoだが、中にul+li（リストアイテム）で構成すると、表示が微妙になる場合がある。状態はfloatのような感じ。
根本的な解決方法は不明だが、pタグなどに変更すれば、暫定的に解決できる。

画面中央配置にする方法はposition:absoluteで上下左右50%をとれば出来、幾つかのサイトで紹介されているのが、画面を小さくした時に消える場合が多い。

CSS Happylifeで紹介されている方法ならデザインが崩れない。

IEでは問題がないが、FirefoxやSafariでfloatを用いると背景が伸びない場合がある。以下がafter擬似クラスを使った対処方法のサンプル。

#name{
background-image: url();
}

#name:after{
content : "";
display : block;
height : 0;
clear : both;
}

text-align:distribute はIEのみ採用されているプロパティで、文章を綺麗に整えたい場合に使用する。現在はIEのみ使えるが、今後他ブラウザ(FirefoxやSafari)で採用されるかは不明。

CSSのみで作るドロップダウンメニューやJavaScriptのみの方法、それらが混在した方法などがあるが、アクセシビリティなど云々を取っ払って、一番使いやすいのは

JavaScript + Ajax 実践サンプル集さんのドロップダウンメニューだと思う。
http://jsajax.com/DropDownMenuArticle286.aspx

CSSオンリーはコードが複雑になりがちだし、JavaScriptオンリーの場合はさすがにSEO関連の問題もある。Flashもしかり。この辺はサイトの性質やブランディングによって判断すれば良いが、このサンプルは汎用性的に使えるし、わかりやすい。

ただ、サンプルそのものの状態ではクロスブラウンジングされていないので、CSSを少しいじれば(submenuにwidthを指定するなど）問題ない。