キャプチャ見てもらうと分かるようにIE8だけ極端に位置がおかしい。

IE8がリリースされてから、まだあんまりいじってないのでよく分かってないのですが、今組んでいるサイトをIE8でチェックしたら、「あれ？表示がおかしい...」って事に遭遇してしまったので、エントリー。

よくある感じで、リストのマーカー変わりに背景の指定をa要素にして、そのリスト内には画像テキストが入ってたんです。はい。

毎度のようにサンプルも用意してみました。

• サンプルを見る

IE6で、floatで指定した値と同じ方向にmarginの指定をすると、指定値の倍程度になってしまうっていう有名なバグ。

その対策として、marginの代わりにpaddingを使うとか、親要素でpaddingを取るとかあったりしますけど、一番手っ取り早い感じで、問題が無さそうなdisplay: inline;を指定する方法がありますよね。えぇ。

何となく他のブラウザに影響ないの！？って思ってしまうかもですが、
こういう矛盾しちゃいそうな指定がされた時はどーしたらええの？っていうのがちゃんと仕様で決まってるので仕様通りに動いてくれるブラウザさんなら問題ないわけです。

そうなんですよ。仕様通りにね、動いてくれるブラウザさんならね。

ジャンプで連載してるP2!がすごく好きなのに、非常に悲しい知らせを聞き、何とかしたいと切に願う今日この頃。
情報元：P2!を応援しています

さて本題に。
border-bottom: 1px dotted #000;とかって書くと、IE6だけ破線の感覚が広くなってしまうじゃないですか。
というか、dashed を指定したときと同じになるアレです。

アレが嫌で、dotted でいけそうなデザインでも背景で切ってたりした訳で。

んで、IE7はなおってるーって喜んでたんですけど、solid で2px以上なborder があると、IE6と同じ破線になってしまうっぽいっていう事にいまさら？気づきました。

サンプルページとダウンロードは以下より。

• サンプルページ
• ダウンロード

IEには様々なバグが報告されていますよね。
もうコーダーからしたら勘弁して下さいって泣きが入りそうになるくらいに...

背景色が指定された要素内でfloatがある時、要素内の文字が消えるとか、floatに後続するmarginの値が無視されるとか、widthを指定しているとボックスの中身にfloatしている要素があっても、自動的に高さが伸びるとか。
こういったIEのバグに有効な手段として、IE6まではheight:1%を指定する事で回避したり、IE7でもwidthを指定して回避したりと色々やってると思います。

その他、IE独自拡張のzoomを使った方法なんかもあります。

今まで理由とかは分からないけど取り合えず解決するんだって事で、widthやheight、zoomを指定しておけばいいんだ。
と認識していましたが、つい先日ちょっと気になる内容をみつけましたのでご紹介。

DWで作成したポップアップメニューをIE7で見ると表示が崩れているという問題を簡単に解決する方法がネットのサラダボウルさんの下記エントリーで紹介されていました。
ネットのサラダボウル: DW8で生成するポップアップメニューがIE7で崩れる件を解消してみた

解決方法は簡単で、自動で出力される「mm_menu.js」というJava scriptのファイルの140行目あたりにある

var itemProps = '';

という記述を

var itemProps = 'white-space:nowrap;';

に修正し保存するだけです。

詳しくはネットのサラダボウルさんの下記エントリーを参照して下さい。
画像つきで丁寧に書かれておりますゆえ。
ネットのサラダボウル: DW8で生成するポップアップメニューがIE7で崩れる件を解消してみた

WinIE7の環境下においてある特定の条件を満たしてしまうと、横幅が指定した値より大幅に大きくなり、横スクロールバーが出てしまうというバグが見つかりました。

サンプル：

http://css-happylife.com/template/09/

原因は、ある条件下でfloat:rightを指定したとき、IE7は親のボックスがサイズ指定されていても、ソレを無視して右に行ってしまうからだと思います。
さらにソコに特定の条件が重なると発生。

• floatでrightを指定している
• リンクを貼っている
• a要素をdisplay:blockにしている
• a要素のmarginでマイナス値を指定している

上記要素が具体的にどのように絡むと発生するのかイマイチわかってないですが、右を基点とする場合があやしいと思う。

また、positionなどで、rightを基点に指定した場合にも発生するかもしれません。

とりあえずサンプルの場合だと、p要素に横幅を指定してあげるか、マイナス値の指定を取ればなおります。

2006年11月2日に、IE7日本語版が正式にリリースされましたね。

そこで早速ボクも入れてみました。

Web好きっ子の一人として、ちょとワクワクしながらIE7のインストールを見守り、いざブラウジングスタート！

ベータの頃にちょっとだけ使ったことがあるのでインターフェースやらタブ機能などは特に違和感無く使えました。
フォントも好きなの選べるようになったし、アンチエイリアスも掛かっていい感じ。
いい感じついでに、メイリオフォント入れてみたりして楽しんでました♪

やっぱキレイですね。
だいぶ、字幅変わってデザインが多少崩れてますが、ソコは見なかったことに...

さてさて、あまり遊んでばかりはいられないので、仕事に戻ることに。

ソコで、今までのワクワクした気分を全て吹き飛ばすような現実を目の当たりにする事になるとは思ってもいなかった...

行間を指定しているにも関わらず、imgなどの置換要素が含まれると、WinIEでline-heightで指定した値より小さくなるというバグ。
line-heightの値があまり大きくなければさして気にはならないのですが、line-height:200%など多少大きめに指定している場合だと、このデザイン崩れがやっかいです。

WinIEの動作確認をしている時に、時々表示が違うってことありませんか？

ボクはソレが結構発生したりして、原因が分からず悩んだりする事が多々有ります。
IEにバグが多すぎるってばそれまでですが、それにしてもIEはよくハメてくれる…

現在仕事で組んでいるサイトがあるんだけど、ソレも時々表示がおかしくなったりして、納期との戦いだったりする昨今。

そんな中、ふと読んでいたブログにpeek-a-booバグなる記事が書かれていたので、今更ながら「あ！」
と思わされました。

びっくりするくらいタイミングが良かった。

ちょっと発生条件が分かってませんが、WinIEだけ読み込み時にボーダーが出たり消えたり、背景がスクロールしたら消えちゃうとかそういうバグにハマってしまったら、
height:1%;
のように、高さを指定して上げる事で解決するそうな。

IEは、高さを固定しても内容物にあわせて自動的に高さもあわせてくれるので、そこを利用して回避します。

そうなると当然、IE以外のブラウザでは高さが固定されてしまうので、子セレクタを利用したハックやら、アンダースコアハックやらで対処しておかなければなりません。

IEちゃんは、ホント。。。もう、ねぇ？

頑張って！！

参考サイト：http://edo-freiheit.sakura.ne.jp/eblog/

大抵のCSSバグは、回避法が有るので何とかなるのですが、回避法が特に存在していないバグの場合非常に困ります。
最近の仕事で、IEバグでは比較的発生しやすいIEバグが起こったのでメモとして記しておきます。

floatで左右どちらかに寄せているボックスに、marginの値を指定するとIE5.x/IE6の環境下で、指定値の2倍程度のmarginが設定される。

大抵の場合はpaddingで代用出来るのですが、今回のケースではdivなどのボックスに対して指定せず、h3などのblock要素に直接floatを指定し、marginで調整しようとした際に発生。

該当のh3には背景画像が指定されており、テキストの位置をpaddingで調整していたので、marginを指定するしか無く、バグが発生しました。
対応方法でいくつか候補はあったのですが、今回はアンダースコアハックで対応。

divを追加して対応という方法も勿論あるのですが、バグ対応の為に本来だったら必要の無いdivを増やす事に抵抗を感じ、ハックで対応しました。