Archive for css bug

IE7でズームしたときヒラギノがおかしい

ボックスの中にフロートしたイメージとテキストがあるレイアウトのページをIE7でズームさせたときになぜかボックスをはみ出してしまうって現象に悩まされまして。

例えばソースはこんな感じ


div.box {
width:500px;
}

div.box img{
float:right;
margin:0 0 0 10px;
}

<div class="box">
<img src="hogehoge.jpg" alt="" />
<p>テキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト</p>
</div>

IE7の後方互換モードでは「:hover」が効かない?

IE6ではa要素以外効かなかった疑似クラス「:hover」がIE7からは効くようにはずなのに、どうしても効いてくれないページがあってなんでだろー?って思っていたんだけど、どうやら後方互換モードでは効かないみたいです :shock:
→テストページ[後方互換モード/標準準拠モード]

調べてみたら、「position: fixed」や「max(min)-width,max(min)-height」も使えなくなるし、アンダースコアハックとかも効いちゃうらしい :sad:

IE7の互換モードとIE6のバグ | Takazudo Clipping*
IE7の互換モードは使えない互換

border-collapse:collapse;とoverflow:hidden;でFirefoxでborderが消えちゃう

いつものようにコーディングしてブラウザチェックをしていたらFirefoxだけTABLEの左ボーダーがどうしても表示してくれなかったんです :sad:
何が原因なんだろうといろいろいじっていた結果どうやらborder-collapse:collapse;とoverflow:hidden;の組み合わせが悪かったみたいです。
overflow:hidden;が指定されたボックスの中に配置されたTABLEで起こる現象みたいで原因はborder-collapse:collapse;を指定したときのFirefoxの仕様にあったっぽい。

統合ボーダーモデルでは、その名の通りボーダーが統合された状態で表示される。各ボーダーモデルはセル間を中心に表示されることになる。テーブル上下左右にはボーダーの半分がはみ出すので注意が必要だ。

border-collapse – A Day in the Life より引用

そんなわけでFirefoxは左に1pxはみ出すので、そのはみ出した1pxのボーダーがoverflow:hidden;で文字通り隠されてしまうということらしいです。
テストページ

2カラムをfloatでレイアウトして、その解除をoverflow:hidden;でやっているときは注意しなくちゃ :!: :!:
でもSafariは右にはみ出した1pxのボーダーが消えないんだよね。。なんでだろー?