雑記的な...

いろいろと勉強途中のドシロウトが書く雑記

スポンサー広告

スポンサーサイト

更新日時:--/--/-- --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Web製作

IE6以下をWeb標準に準拠させる「IE7.js」

更新日時:2008/02/06 22:29

面白い物を見つけたので遊んでみました。

IE6以下ではボックスモデルの解釈やマージンの効き方が色々と特殊です。
IEでのみ動作確認していないために他のブラウザで大きく崩れているサイトもいくつか見かけます。

そうならないためにハックを使ったりなどして対処します。もう当たり前過ぎの作業になっていて悲しくなりますね。

しかし、「IE7.js」というライブラリをスクリプトを埋め込む要領でhead内に記述しておけば、IE6以下の挙動がCSS/XHTMLの仕様通りに動いてくれます。ハックが必要なくなるわけです。

IE6でよく陥りそうな動作の違いをピックアップしてIE7.jsを適用してみました。といってもほんとはIE7.jsの配布先に検証ページがあるんですけどね。

以下のページはIE6以下で見て違いを比べてください。

IE7.jsなし
IE7.jsあり

すごいですね。IE7.jsありでは仕様通りに動いてくれました。

が、おかしなところを発見。英文字列によってボックスが横に広がってしまうバグがありますよね?

製作者側で長~い英文字列を使わなければいいだけですね。というか使わないと思います。しかし閲覧者のコメントで長い文字列が出てくる場合があります。2ちゃんねるブログなどで「wwwwwwww」のせいで崩れているのをよく見かけます。

visible

IE7.jsを適用し、overflow:visibleを指定してやれば広がらずに、そのままボックスを突き破ってくれます。これでフロートでレイアウトしたサイトがボックスの広がりによって崩れることは無いはず。

しかし、overflow:visibleを指定すると崩れます・・・。正確に言うと、崩れる前にすでに崩れてます。ボックスが広がってしまう問題以前の問題ですよ。

以下のページをIE6以下で見てみてください。

検証ページ

フロートで2カラムを簡単に作ってみたのですが、IE7.jsを適用してoverflow:visibleを指定すると回り込んでくれません。これではoverflowは指定できません。

あとよく陥る問題として、フロートをかけたブロックにマージンをかけるとマージンが約2倍になる問題がありますが、それはほかのライブラリで解決できるようです。

あとはまぁ、どうでもいんですがタグに直接styleでCSSを記述するとIE7.jsは動作してくれないようです。

ベータ版なのでまだ色々な問題があるようですね。

IE7.js
スポンサーサイト

コメント

コメント投稿後、編集や削除する可能性がある場合にはpassが必要になりますので、passを入力してください。また、ただ宣伝するだけのコメントと判断した場合は削除しますのでご了承ください。

コメントの投稿
管理者にだけ表示を許可する

トラックバックURL

トラックバック一覧

検索


WWW を検索
このブログを検索

Amazon


紹介

Firefoxのアドオン「Stylish」で使えるCSS作ってます。
こちら
stylishとは?

Mozilla Firefox ブラウザ無料ダウンロード

カレンダー

05│2018/06│07
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

Copyright © 2008 雑記的な... All Rights Reserved

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。