ネタ元の記事は以下。
firefoxでmargin-bottomがmargin-top | 乱雑モックアップ

この記事で紹介されていた clearfix は以下ようなもの。
僕はこの指定から height:0; を抜いたものを使っていました。

.clearfix:after{
content:'';
display:block;
clear:both;
height:0;
}
.clearfix{
/zoom:1;
}

そして、解決方法として教えてもらったのが hail2u.net さんのデモ。
firefoxでmargin-bottomがmargin-topになったりするのを回避する

この解決方法は、height:0; を height:0.01px; にしています。

.clearfix:after{
content:'';
display:block;
clear:both;
height:0.01px;
}
.clearfix{
/zoom:1;
}

この記事の公開時点（2012年2月1日）の最新版 Firefox 10.0 でも 3.6 と同様の挙動で、hail2u.net さんの方法で解決できます。

アレンジ版作ってみました

height:0.01px; の指定で解決できますが、他の解決方法がないかと試してみました。
なお、zoom:1; の部分は共通なので、以下のコードでは省略しています。

検証ブラウザは以下の通り。
※ Mac: Mac OS X Lion、Win: Windows 7

• Firefox 3.6.25 (Mac, Win)
• Firefox 4.0.1 (Mac, Win)
• Firefox 9.0.1 (Mac, Win)
• Firefox 10.0 (Mac, Win)
• Chrome 16.0.912.77 (Mac, Win)
• Safari 5.1.2 (Mac, Win)
• Opera 11.61 (Mac, Win)
• Internet Explorer 8 (Win)
• Internet Explorer 9 (Win)

Internet Explorer 6、7 は関係しない変更なので、検証はしていません。
また、検証したのは Firefox の4つのバージョンのみで、バージョン 5 〜 8 では未検証です。
リリース直前だったので、バージョン 9.0.1 と 10.0 で検証していますが、これに深い意味はないです。

元記事コメント欄版

元記事で、.clearfix:after に overflow:hidden; を指定すれば、height:0; の指定は必要なくなるとのコメントが書かれていたので試してみたところ、問題なく動作しました。
また、overflow:auto; を指定してもうまくいきました。

.clearfix:after{
content:"";
display:block;
clear:both;
overflow:hidden;
}

この2つは、「clearfix を使わずに float を解除する」みたいなやつと同じってことですかねってことで、深く追ってません。

height:0; を別のプロパティに変えてみた版

clearfix のバリエーションのうち、.clearfix 側に min-height:1%; って使ってたなーと思って試したらうまくいっちゃった版。

.clearfix:after{
content:"";
display:block;
clear:both;
min-height:1%;
}

visibility:hidden; など他のプロパティも試してみましたが、うまくいかず。
複数のプロパティの組み合わせでうまくコントロールできるかもしれませんが、コードがどんどん長くなりそうだったので、このパターンはここまで。

display:block; を違うものにしてみた版

元記事で .clearfix 側に display:inline-block; を指定すると直ると書かれていました。
確かに変なマージンは取れましたが、これはこれで違う余白の問題が出る可能性高いので、あまり使いたくないかなと。
ということで、1つ前のパターン同様、.clearfix:after のほうに指定してみたところ、期待通りの動作になりました。

.clearfix:after{
content:"";
display:inline-block;
clear:both;
}

また、display:table; or display:inline-table; でもうまくいきました。
display:table; のほうは、A new micro clearfix hack – Nicolas Gallagher と同じような感じになりました。
display:inline-table; はなんとなくやってみたら効いてくれた程度のものです。

まとめ

行数（覚える量）が増えずに意図した挙動をしてくれるということで、display:inline-block; を指定する版をしばらく使ってみようかなと思います。
一番コード量が少ないのは display:table; ですが、なんとなく気持ち悪いので。

ということで、以下のコードが現時点でのオレオレ clearfix になりました。

.clearfix:after{
content:"";
display:inline-block;
clear:both;
}
.clearfix{
/zoom:1;
}

なお、Firefox 2 では、display:inline-block; に対応していないので、上記の指定ではマージンの挙動がコントロールできません。要件に組み込まれている際にはそのまま使わないように注意してください。

min-height:1%; のほうなら大丈夫みたいですが、Firefox 2 は、2008年末で開発とサポートを終了しており、アップデートできない場合は他のブラウザを使用するようアナウンスしているので、対応することはないと思います。

ブラウザの種類、バージョンでうまくいかなかったり、新しい解決方法を見つけた方は教えてください。

関連投稿

• display: inline-block を使う（修正版）
  category: CSS tags: CSS+tips.
• display:inline-block; を使う
  category: CSS tags: CSS+tips.
• Dreamweaver の作業効率を上げるためのメモ
  category: tool tags: Dreamweaver+tips+tools.

Mac 版 Safari で、フォーカスしても placeholder 属性に入れたテキストが消えない現象を見つけました。
現象を確認したのは、Mac 版 Safari 5.1.1 (7534.51.22) です。

対応している他のブラウザでは、フォーカスした時点で placeholder は隠れますが、Mac 版 Safari 5.1.1 (7534.51.22) ではテキストを入力し始めるまで隠れてくれません。
なお、Chrome 12.0.835.202 ( Windows、Mac ともに )、Windwos 版 Safari 5.1.1 (7534.51.22) では発生しませんでした。
そんな状態なので、バージョンアップしたら直るんじゃないかと思いますが、一応メモ。

追記: バグではなく、OS X Lion 上の Safari の仕様みたいです。言われるまで気づいていませんでしたが、iOS でも同じ挙動をしていました。矢倉さん、ありがとうございます。
参考: プレースホルダとHTML5のplaceholder属性
http://myakura.github.com/n/placeholder.html

対処法

Safari のユーザ・エージェント・スタイルシートに以下のような指定があります。

input::-webkit-input-placeholder,
isindex::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
    color: #A9A9A9;
}

これを参考にして、:focus 状態の placeholder に対して、color: transparent; を指定。

input:focus::-webkit-input-placeholder,
isindex:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

上記の指定をしておけば、フォーカスした時点でテキストが隠れます。

サンプル

Mac 版 Safari でフォーカス時に placeholder が消えない – jsdo.it – share JavaScript, HTML5 and CSS

背景色が白のサイトだったので、最初は color: #ffffff; にしてましたが、まとりん ( @ub_pnr ) に transparent でもいけるんじゃない？とアドバイスをもらい、試してみたところ問題なさそうだったので、transparent を採用しました。ありがとう、まとりん！

ちなみに、opacity: 0; も試してみましたが、こちらはうまくいきませんでした。

関連投稿

• デフォルトスタイルのリセット
  category: CSS tags: CSS+tips.
• display: inline-block を使う（修正版）
  category: CSS tags: CSS+tips.
• table に指定しておきたい CSS メモ
  category: CSS tags: CSS+tips.

いろいろなブラウザーでチェックをしている時に、以前書いた記事 display:inline-block; を使うで紹介していた CSS ではブラウザーごとに微妙な誤差があったので、修正版を書いてみました。

以前書いていたコード

.parent {
letter-spacing: -.40em;
}

.child {
letter-spacing: normal;
vertical-align: top;
display: inline-block;
/display: inline;
/zoom: 1;
width: 100px; /* 任意の値 */
}

こちらのコードでもうまくいくことが多いのですが、Windows 版の Opera で<li>の右側に空白が発生してしまいました（バージョン、ビルドが同じ Mac 版の Opera では問題なし）。

YUI と StackLayout を参考にしてみたものの版

次に YUI grids.css、stacklayout.css を参考に word-spacing を追加してみました。

word-spacing の値については、冒頭で紹介した @nagomu さんの記事で stacklayout.css と同じ（-0.65em）でいいんじゃないかという結論が出ていました。

なお、YUI grids.css の値だと、WebKit 系ブラウザーで以下の問題が出ました。

• 文字サイズを拡大縮小した際に空白ができる
• display: inline-block; された要素の親要素の文字サイズを変更する（font-size: 120% とか）と空白が出ることがある

.parent {
letter-spacing: -1em;
word-spacing: -1em;
width: 600px; /* 任意の値 */
}

.child {
letter-spacing: normal;
word-spacing: normal;
display: inline-block;
vertical-align: top;
/display: inline;
/zoom: 1;
width: 100px; /* 任意の値 */
}

いろいろ試してみてた結果、上記の CSS を適用すれば Windows 版 Opera でもうまくいきましたが、WebKit 系のブラウザーで子要素が前にめり込むようになってしまいました。

WebKit 系向けの指定部分の letter-spacing: -1em; を削除するとめり込まなくなりますが、当然 WebKit 系の空白が埋められず。

ちょっとチカラ技な気がするけどうまくいった版

なんとかできないかといろいろ試した結果、以下の指定でなんとかなりました。
1つ上のコードとの違いは、letter-spacing: -1em; を削除したことと display: table; を追加したこと。

.parent {
word-spacing: -1em;
display: table;
width: 600px; /* 任意の値 */
}

.child {
word-spacing: normal;
display: inline-block;
vertical-align: top;
/display: inline;
/zoom: 1;
width: 100px; /* 任意の値 */
}

word-spacing の値については、細かい検証は行なってません。
数字が単純で、ちゃんと効いているようなのでひとまず。

動作は以下のブラウザーでチェック。

Windows: IE 6〜9, Firefox 4, Opera 11.01, Safari 5.0.4, Chrome 10.0
Mac: Firefox 4, Opera 11.01, Safari 5.0.4, Chrome 10.0

うまく効いていない環境などありましたらご連絡いただければと思います。

※ 2011年4月21日@terkel さんからのおかしくなるパターンと解決方法を教えていただきました。

IE 8と IE 9で発生。
子要素（ここでは .child ）に :hover を指定すると、親要素に :hover した際に最初の子要素が :hover 状態になってしまう。
文章では分かりにくいので、サンプルを見てみてください。

.parent {
word-spacing: -1em;
display: table;
width: 600px; /* 任意の値 */
}

.child {
word-spacing: normal;
display: inline-block;
vertical-align: top;
/display: inline;
/zoom: 1;
width: 100px; /* 任意の値 */
}

.child:hover {
cursor: pointer;
background: red;
}

このサンプルで、子要素がないエリアでも ：hover が反応してしまっているのが分かるかと思います。

そして、これの解決方法は、親要素に display:block\9; を指定すること。
「\9」の部分は IE 8と9用のハックです。

.parent {
word-spacing: -1em;
display: table;
display: block\9; /* IE 8, 9用の指定 */
width: 600px; /* 任意の値 */
}

.child {
word-spacing: normal;
display: inline-block;
vertical-align: top;
/display: inline;
/zoom: 1;
width: 100px; /* 任意の値 */
}

.child:hover {
cursor: pointer;
background: red;
}

問題の発見と解決方法を教えてくださった @terkel さん、ありがとうございます。

その他、うまく効いていない環境、パターンなどがありましたら教えてください。

関連投稿

• display:inline-block; を使う
  category: CSS tags: CSS+tips.
• CSS でグラフを描く
  category: CSS tags: CSS.
• デフォルトスタイルのリセット
  category: CSS tags: CSS+tips.

参考にさせていただいたのは、こちらの記事。
指定した要素を半透明にできるopacity（IEでも使える） | Coder’s Note

opacity: 0.5;
-moz-opacity: 0.5; /* Firefox */
filter: alpha(opacity=50); /* IE6/7 */
-ms-filter: "alpha(opacity=50)"; /* IE8 */

これの適用先をマウスオーバー時の画像にする。

.hover a:hover img{
    opacity: 0.75;
    -moz-opacity: 0.75; /* Firefox */
    filter: alpha(opacity=75); /* IE6/7 */
    -ms-filter: "alpha(opacity=75)"; /* IE8 */
}

50％だとさすがに透明すぎるので、75%くらいに設定することが多いですが、基本的にはこれをコピペで数字を変えるだけでオッケーなのです。ナイス！

毎回新規の id や class を作るのは CSS が長くなるだけなので、.hover のような class を作って指定したい箇所に付与していくのが無難な使い方になるのかなと思います。

ただし、これがうまくいくのは背景が単色の時だけです（特に白系の時）。
画像半透明にしているので、背景が黒なら画像はグレーっぽくなるし、背景が画像ならそれが透けて見えてしまいます。
そういった場合は、画像の1つ外側を囲むタグ（例えば div）の背景に白を指定することで解決。

場合によっては本来必要がなかったタグを追加したり、使用しにくい構造だったりしますが、画像を毎回作る手間を考えれば小さい手間じゃないでしょうか。

関連投稿

• display:inline-block; を使う
  category: CSS tags: CSS+tips.
• デフォルトスタイルのリセット
  category: CSS tags: CSS+tips.
• table に指定しておきたい CSS メモ
  category: CSS tags: CSS+tips.

tableのcellspacing=”0″が必要なことはかなり多い。
しかし、これと同じことをしてくれるCSSのプロパティ、border-spacing:0 は、IE7以下では対応していない。そこで登場するのがborder-collapse:collapse なのだけれど、これにもまた問題がある。そんなこんなを解決するTips。やりたいのはcellspacing=”0″を入れたくないってだけですが。

という一文。一文というより最後の一言がグッときましたね。
そうそう、HTML 側に余計なもの書き込みたくないんですよね。それだけ。

できるだけキレイな HTML、CSS を組みたいものです。
このブログはいろいろ汚いとこがあるので、ちょっとずつ直していきます…。

ということで、Takazudo さんの書いていた CSS を自分向けに改変したものをメモ。

table{
width:auto;
border-spacing:0;
border-collapse:separate;
/border-collapse:collapse; /* ie6,7 */
border-right:1px solid #333333;
border-bottom:1px solid #333333;
table-layout:fixed;
word-break:break-all;
word-wrap:break-word;
}

th, td{
border-top:1px solid #333333;
border-left:1px solid #333333;
padding:5px;
}

Takazudo さんのサンプルに追加して、「table-layout:fixed;」、「word-break:break-all;」、「word-wrap:break-word;」を指定しています（プロパティの順番も変更）。

追加したもの

table-layout:fixed;

この指定を入れておくと、セルの横幅が以下のようになります。

• 各セルの幅を指定していればそのサイズに
• 指定していない場合はセルの数で均等に分割

table-layout はデフォルトが auto なので、自動で幅を調整してくれる方がいいなら、この指定を外すか該当する箇所で上書きすればいいと思います。

また、この指定をしておくと最初の一行目を読み込んだ時点で各列の幅を固定して表示を開始するため、 表示が速くなるメリットがあるそうです（参考: table-layout－スタイ ルシートリファレンス）。

回線速度自体が結構早くなっているので、そこまで気にする必要はないかもしれないですが。

word-break:break-all; と word-wrap:break-word;

これらの指定は、セル幅を超える長い単語や URL を強制的に折り返させるために入れています。
日本語をエンコードした URL が表示された場合などに word-wrap:break-word; の指定をしていないとセルを突き破って表示しちゃいます。

指定なし

IE6, IE8, Fx 3.6, Chrome 6.0, Safari 5 で突き破る

word-wrap:break-word; のみ指定

IE6, IE8, Fx 3.6, Chrome 6.0, Safari 5 でオッケー

word-break:break-all; のみ指定

Fx 3.6 で突き破る

両方指定

IE6, IE8, Fx 3.6, Chrome 6.0, Safari 5 でオッケー

ということで、セル内で改行させるという本来の目的は果たせているので、word-wrap:break-word; の指定だけでもいいのですが、その場合には IE だけ改行位置が変わってしまいます。

そもそもなんでこの指定（word-break:break-all;）を入れたのかを覚えていないのですが、word-break:break-all; を加えると、IE と他のモダンブラウザ間で表示が近くなるので外さずに残しています。

原因が分からないので、また時間があるときにでも調べてみようと思います。
原因が分かる方、うまくいかないパターンを発見された方がいらっしゃいましたら、ぜひ教えていただければと思います。

関連投稿

• デフォルトスタイルのリセット
  category: CSS tags: CSS+tips.
• Firefox のキーボードショートカットのチートシート
  category: Firefox tags: Firefox+tips.
• display:inline-block; を使う
  category: CSS tags: CSS+tips.