CSSに関するネタを中心に色々書いてます。
待ってました。心底待ってました。
本気で待ってました！
Vistaの64bitでもIE6とかがチェック出来ちゃう素敵なアプリを！
これ一つで、IE5.5、IE6、IE7、IE8 beta1 の確認が出来てしまうんです。
インストール方法もとても簡単で、Download IETester v0.2 を押してダウンロードして実行。
後は、OK押して進んでいけば完了！
基本的なレンダリングチェックには問題ないっぽいですが、まだアルファ版なので、ちょこちょこバグがあるっぽいです。
まぁすぐに修正されるんじゃないでしょうか。
続きは、IETesterの使ってみての簡単な感想と、雑記です。
IE6で、floatで指定した値と同じ方向にmarginの指定をすると、指定値の倍程度になってしまうっていう有名なバグ。
その対策として、marginの代わりにpaddingを使うとか、親要素でpaddingを取るとかあったりしますけど、一番手っ取り早い感じで、問題が無さそうなdisplay: inline;を指定する方法がありますよね。えぇ。
何となく他のブラウザに影響ないの！？って思ってしまうかもですが、
こういう矛盾しちゃいそうな指定がされた時はどーしたらええの？っていうのがちゃんと仕様で決まってるので仕様通りに動いてくれるブラウザさんなら問題ないわけです。
そうなんですよ。仕様通りにね、動いてくれるブラウザさんならね。
使う機会は滅多に無いんだけど、知識として知ってないと困ったりしたので、取りあえず現在主流だろうブラウザのハックを自分のまとめ用に。
実際の状況を確認出来るように、デモページもご用意しました。
必要あるか分かりませんがダウンロードも出来るようにしときました。
拡張子がshtmlとかなってるので、htmlにして下さい。
ジャンプで連載してるP2!がすごく好きなのに、非常に悲しい知らせを聞き、何とかしたいと切に願う今日この頃。
情報元：P2!を応援しています
さて本題に。
border-bottom: 1px dotted #000;とかって書くと、IE6だけ破線の感覚が広くなってしまうじゃないですか。
というか、dashed を指定したときと同じになるアレです。
アレが嫌で、dotted でいけそうなデザインでも背景で切ってたりした訳で。
んで、IE7はなおってるーって喜んでたんですけど、solid で2px以上なborder があると、IE6と同じ破線になってしまうっぽいっていう事にいまさら？気づきました。
サンプルページとダウンロードは以下より。
beta2くらいから出てたIE7用のハックですが、正式版でも修正が入っていなかったようです。
あまり頼りたくはありませんが、IE7のバグはこれからどんどん出てきそうなんで覚えておいた方が良さそうですね。
*:first-child+html
WinIE7の環境下においてある特定の条件を満たしてしまうと、横幅が指定した値より大幅に大きくなり、横スクロールバーが出てしまうというバグが見つかりました。
http://css-happylife.com/template/09/
原因は、ある条件下でfloat:rightを指定したとき、IE7は親のボックスがサイズ指定されていても、ソレを無視して右に行ってしまうからだと思います。
さらにソコに特定の条件が重なると発生。
上記要素が具体的にどのように絡むと発生するのかイマイチわかってないですが、右を基点とする場合があやしいと思う。
また、positionなどで、rightを基点に指定した場合にも発生するかもしれません。
とりあえずサンプルの場合だと、p要素に横幅を指定してあげるか、マイナス値の指定を取ればなおります。