現在表示しているページ
Home > Weblog > Webデザインのメモ > zoom:1;

2007年09月09日

zoom:1;

今作っているWebサイトのトップページに新着情報を載せる予定なのですが、
DL DT DD を使ったコーディングで、CSSでDDをDTの横に表示するようにマイナスのmarginを使っています。

それで、DDのほうに、リンクを張ったのですが、IEだとなぜかマウスでそのリンクが反応しない。
キーボードでの操作だとリンクにいけるんですが……。

しばらく悪戦苦闘した結果、マイナスmarginで重なっているのが原因のようでした。
なので、DTにwidhtを指定して、重ならないようにしたのですが……それでも症状は治らず。

なので、このCSSのテクニックを使っている方のCSSをじっくり見ると、DDにzoom:1;という値が。
同じように入れると、あら、直った。

確かに、IEのCSSのバグのときに、zoom:1;やheight:1%;を指定すると直るという話は聞いたことがありました。
そこで、何故なのかということを検索してみると、いつも見ているCSS HappyLifeさんの記事の、
IEの様々なバグの真相らしきものというのを見つけました。
hasLayoutがIEの様々なバグの元凶(大袈裟?)だったみたいです。

hasLayoutは、ソコにレイアウトが有るのか無いのかってのを判断しているようで、デフォルトの値がfalseでレイアウト無しになっているので「背景色が指定された要素内でfloatがある時、要素内の文字が消える」とかって現象が起こるっぽいです。
そして、zoomやheightなどがこのhasLayoutの値をtrueにするということらしいです。

hasLayoutについては、
IEでのCSSのバグを回避するhasLayout(コリス)にまとまって載っています。

zoomで指定するのが楽なのかもしれないですけど、独自拡張を使うというのはなるべく避けたいですね。
height指定が可能であれば、そっちを利用していこう。

(とか言っておきながら、FireFoxのスクロールバーの有無でのズレを防止する為に、overflow-y:scroll;を入れているのだけどね…)
タグ:CSS IE
posted by aoi_gen2 at 00:55 | Comment(0) | TrackBack(0) | Webデザインのメモ
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/54514911
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック