« Movable Typeでダイナミック・パブリッシング | 我が家で猛威をふるう風邪 »

IE7をインストールしてみた

Posted by 琉羅 at 2007年04月16日 13:36

Windows Internet Explorer 7

先日、自宅のノートPCにWindows Internet Explorer 7（以下IE7）を遅ればせながらインストールしてみました。

なかなか進まないインストールの状況と睨めっこすること数十分（というのは嘘で実際は放置）。何とか無事にインストールも完了し、再起動後に早速IE7を起動してみると・・・。

IE7のツールバー

結構見た目にもスッキリと変貌しましたね。
まず目に付いたのが、一番上にあったメニューバーがごっそりと無くなっています。また、お気に入りはタブの一番左にコンパクトにまとめられており、クリックした時だけ開くようになっていたりします。全体的にかなりFirefoxを意識した作りになっているようで、大雑把に使ってみた結果、使い勝手もほぼ同様だと感じました。

ただ残念だったのがネット上でも話題となっている、空白ページ問題。詳細は、

を見ていただければ分かると思います。更新（F5）すれば問題なく表示されるのですが、早急にバグフィックスしてもらいたい問題ですね。

最後にページの表示について。
今までIE7で自分のサイトを見たことがなかったので気付かなかったのですけど。

Firefoxで<pre>を表示<pre>タグに"overflow:scroll;"をCSSで設定しているのですが、これをFirefoxで表示させると左画像のように何故か下側に無駄なスペースが表示されてしまいます。これは1行だけの場合に起こるようで、複数行の場合だとこのようなスペースは表示されません。

そこでCSSハックというのを利用して下記のように記載すると、IE6・Firefoxともに問題なく表示されるようになりました。青字の部分はIEを除くモダンブラウザ（Firefox、Opera、Safari）でしか適用されないようにするものです。

pre {
  overflow: scroll;
}
html>body pre {
  overflow: auto;
}

IE6・7で<pre>を"overflow:auto;"表示そもそもこのような面倒なことをしなければならないのは、IE6と7で<pre>を"overflow:auto;"表示させると左画像のようになってしまうからであって、横スクロールが必要となる場合、何故か一番下の行だけがほとんど隠れてしまうんですよね。その上、IE7では上記のハックも適用されてしまう（通用しない）ようなんです、これがまたorz

で、IE7のCSSハックについて調べてみたところ、すぐに見つかりました。

ここを読んで下記のようにCSSを変更すれば、上手く表示させることができるようになりました（IE6・7、Firefox、Operaで確認）。

pre {
  overflow: scroll;
}
html>/**/body pre {
  overflow: auto;
}

前述したCSSハックに、更に青字の"/**/"を付け加えただけで、IE6・7共にこのハックを読むことができなくなります。ちなみに、当初は勘違いしておりまして、

pre {
  overflow: scroll;
}
#content>/**/.section pre {
  overflow: auto;
}

のように記載していたのですが、何故か問題なく表示していました ＾＾；
最後に、今回ご紹介したCSSハックはW3C CSS 検証サービスにおいてValidすることができますので安心してご利用ください（笑）

Tags: CSS, Firefox, IE, Opera, W3C, ハック, 不具合

"IE7をインストールしてみた" をnewsing it! "IE7をインストールしてみた" をdel.icio.usに追加 "IE7をインストールしてみた" をYahoo!ブックマークに追加 "IE7をインストールしてみた" をlivedoorクリップに追加 "IE7をインストールしてみた" をSaafブックマークに追加 "IE7をインストールしてみた" をニフティクリップに追加 "IE7をインストールしてみた" をBuzzurlに追加 "IE7をインストールしてみた" をPOOKMARK Airlinesに追加 "IE7をインストールしてみた" をはてなブックマークに追加 IE7をインストールしてみた" のはてなブックマークコメント "IE7をインストールしてみた" のはてなブックマーク数

トラックバック

CAPTCHA
トラックバックスパム防止のため、末尾の XXXXXX 部分を上記画像の数字に置き換えてからご利用ください。お手数ですがご協力よろしくお願いいたします。

コメント

わたしもこの件で悩み続けていました。
このサイト見つかって喜び200％です！
ありがとう。

1. Posted by sippu at 2007年07月09日 19:30

琉羅

＞sippuさん
初めまして。
些細なことでも、上手くいくと嬉しいものですよね。
お役に立てて良かったです（・∀・）

2. Posted by 琉羅 [TypeKey Profile Page] at 2007年07月10日 08:07

以下の方法を試してみてくれませんか？

overflow:auto;
overflow-x:scroll;

この方法だと右側のスクロールバーが消えて少しスッキリした感じになります。

3. Posted by sippu at 2007年07月17日 19:40

琉羅

＞sippuさん
overflow-xですが、これはIE独自のプロパティのようで、残念ながらW3CのCSS Validatorに通らなくなってしまいます。

確かにIEのpreタグはスクロールバーが常に表示されているので、消したいのは山々なんですけどね。私も色々と調べたのですが、結局回答を得ることができず、現状に留まっている状況です。

4. Posted by 琉羅 [TypeKey Profile Page] at 2007年07月18日 09:58

overflow-x, overflow-yは既にFireFox1.5から実装されており、CSS3には含まれるようです。

5. Posted by sippu at 2007年07月18日 22:04

琉羅

＞sippuさん
全く知りませんでしたorz
情報ありがとうございます（・∀・）

6. Posted by 琉羅 [TypeKey Profile Page] at 2007年07月19日 09:23

コメントを投稿

（サラリーマン白書 では不適切なコメントを防止するため、コメントを掲載する前に管理者がコメントの内容を確認しています。コメントを初めて投稿する場合すぐに掲載されませんが、管理者が適切なコメントと判断した場合コメントは直ちに表示されますので、再度コメントを投稿する必要はありません。）

コメントフォーム
*必須
Copyright © 2007 サラリーマン白書, All Right Reserved.