ブラウザ関係

IE7バグ:横幅が指定値よりも広がる

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

サンプル:

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

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

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

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

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

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

InternetExploerer7 日本語正式版で早々に気になったバグ...

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

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

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

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

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

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

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

IEバグ:img要素などの置換要素を含む行の前後では、line-heightが指定した値より小さくなる

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

↑上に行くよ