ネタ元の記事は以下。
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.

参加者40名、約5時間という長丁場の勉強会。

発表資料

当日発表したスライドを加筆修正したものをスライドシェアで公開しています。
今回僕は、「WordPress を自分好みに」というタイトルで、functions.php にちょっと書き足すだけでできるカスタマイズ方法を紹介しました。

フックについて簡単に話をしているのですが、「フックってなに？」というのは、以前自分自身が戸惑ったところでした。
コードを見ていると、すごく難しいことをやっているように見えてしまって。

今回は初心者向けの内容をということだったので、フックって怖いものじゃないんだよということを感じてもらえればと、add_filter() と add_action() の紹介のような内容になっています。

不明点や間違いなどがありましたら、こちらのコメント欄などでお知らせいただけたらと思います。

関連投稿

• WordPress 3.1で追加された管理バーを非表示にする方法
  category: WordPress tags: tips+WordPress.
• WordBench 東京勉強会に参加してきました。
  category: diary tags: diary+WordBench+WordPress.
• WordCamp Yokohama 2010 に参加してきました(後編)
  category: diary tags: diary+WordBench+WordCamp+WordPress.

いろいろなブラウザーでチェックをしている時に、以前書いた記事 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.

この機能が不要な場合は、管理画面のプロフィール設定から表示・非表示を切り替えられます。

毎回この設定を変更するのは面倒

ユーザーが1人の場合などは一回設定をすればいいですが、複数のサイトのユーザーについて毎回管理バーを非表示にするためにポチポチしていくのは面倒です。

WordPress Codex に管理バーを非表示にする方法が書いてあったので、このサイトで試してみました。
functions.php に以下の記述を追加するだけで一括で非表示にできます。

function my_function_admin_bar(){
return false;
}
add_filter( 'show_admin_bar' , 'my_function_admin_bar');

もっと単純に以下の1文でも非表示にできました。

add_filter( 'show_admin_bar', '__return_false' );

この方法で非表示にすることはできたのですが、functions.php を更新したあとに管理画面からログアウト→再ログインしないと設定が反映されませんでした。
僕の環境だけかもしれませんが、うまくいかなかった場合はログアウト→再ログインしてみてください。

なお、管理者でログインしている場合のみ表示するようにしたい場合は以下のようにすればよいそうです。

function my_function_admin_bar($content) {
return ( current_user_can("administrator") ) ? $content : false;
}
add_filter( 'show_admin_bar' , 'my_function_admin_bar');

参照：Plugin API/Filter Reference/show admin bar « WordPress Codex

管理画面からも消し去るには

先の方法で管理バーを非表示にすることができますが、管理画面には設定項目が残っています。
ここにチェックを入れても表示されませんが、不要な項目なのでこちらも非表示にしてしまいます。

add_action('admin_print_styles-profile.php', 'disable_admin_bar_prefs');
function disable_admin_bar_prefs() {?>
<style type="text/css">
    .show-admin-bar {display:none;}
</style>
<?php
}

ちょっと強引な感じですが、表示されているメニューを display:none; で消してます。
こちらはよりいい方法が見つかれば、こちらの記事も修正したいと思います。

関連投稿

• WordPress 2.9にアップデートしました
  category: WordPress tags: tips+WordPress.
• コメント欄をにぎやかにするプラグイン Feedback Champru
  category: WordPress tags: plugin+WordPress.
• 【お詫び】WordPants での間違いについて
  category: WordPress tags: tips+WordPress.