2008/11/7 金曜日 at 11:27:35
· Filed under css bug
ボックスの中にフロートしたイメージとテキストがあるレイアウトのページを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>
なんでだろうと思っていたらどうやらbody要素に指定したfont-familyが悪さをしていたみたいでした 
「ヒラギノ角ゴ Pro W3」を指定しているとなぜかIE7でズームした時にテキストがボックスからはみ出してしまう模様 
→テストページ
「ヒラギノ」って確かMac OS Xの標準日本語フォントだったような気がして普通に指定していたけど、こんなことがあるとは・・・。
どうして今まで気づかなかったんだろうって思ったんだけど、もしかして私のIE7がスタンドアロンだから起きていたり
« Hide it
2008/10/17 金曜日 at 14:30:31
· Filed under css bug
IE6ではa要素以外効かなかった疑似クラス「:hover」がIE7からは効くようにはずなのに、どうしても効いてくれないページがあってなんでだろー?って思っていたんだけど、どうやら後方互換モードでは効かないみたいです 
→テストページ[後方互換モード/標準準拠モード]
調べてみたら、「position: fixed」や「max(min)-width,max(min)-height」も使えなくなるし、アンダースコアハックとかも効いちゃうらしい
☆IE7の互換モードとIE6のバグ | Takazudo Clipping*
☆IE7の互換モードは使えない互換
2008/5/22 木曜日 at 20:01:10
· Filed under css bug
いつものようにコーディングしてブラウザチェックをしていたらFirefoxだけTABLEの左ボーダーがどうしても表示してくれなかったんです 
何が原因なんだろうといろいろいじっていた結果どうやら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のボーダーが消えないんだよね。。なんでだろー?