さぽろぐ

  日記・一般  |

新規登録ログインヘルプ


2006年09月06日

Win IEをのけものにするようにCSS修正

こないだ変更したスタイルシートだが、kacoさんのご報告によりWinのIEだけ背景が固定されずに一緒にスクロールされるというのがわかって、調べたところこれはIEの仕様でどうしようもないということがわかって放置していた。(^_^;

んが、今日たまたまいつも覗いてるサイトでCSSの話題があり、そこで使われていたCSSハック(アンダースコア・ハック、子セレクタ・ハック他)と呼ばれるものにより、Win IEをのけものにする方法がわかったので、その方法でCSSを修正してみた。

今回はとりあえず子セレクタ・ハックという方法により、

#wrapper {
tbackground-color: #ffffcc;
tbackground-image: url(http://sapolog.com/u/1003/%a4%aa%c3%ce%a4%e9%a4%bb/0000388282_img.jpeg);
tbackground-repeat: no-repeat;
tbackground-attachment: fixed;
tbackground-position: 215px 0;
twidth: 900px;
}

と設定していたところを、

#wrapper {
tbackground-color: #ffffcc;
twidth: 900px;
}
body > #wrapper {
  /* こちらの設定はWin IEでは設定されない */
tbackground-image: url(http://sapolog.com/u/1003/%a4%aa%c3%ce%a4%e9%a4%bb/0000388282_img.jpeg);
tbackground-repeat: no-repeat;
tbackground-attachment: fixed;
tbackground-position: 215px 0;
}

というふうに変更し、WinのIEでは背景画像を読み込まないようにした。

つまりこれでWin IEでは背景画像なしのシンプルなスタイルになりこれまで背景がついてて見づらかった部分も読みやすくなり、また、背景が固定できる比較的最近のブラウザではわたしの意図した通りのデザインが表示されるというようになった。(はず)

一応自分で確認済みのブラウザを書いとく。
☆Windows 98SE
IE 6→背景画像非表示
Netscape 7.1→デザイン通り
Firefox 1.5→デザイン通り
Opera 9→デザイン通り

☆Mac OS X 10.4
Safari 2.0.4→デザイン通り
Netscape 7.1→デザイン通り
Firefox 1.5→デザイン通り
Opera 9→デザイン通り
IE 5.2.3→デザイン通り(なぜかMacの古いIEがちゃんと表示できてたりする。(笑))

ということで、Win IEに関してはこれでお茶を濁すことにする。(^_^;

あなたにおススメの記事

同じカテゴリー(ソフトな話)の記事画像
仮想日本一周徒歩の旅
同じカテゴリー(ソフトな話)の記事
 記事修正のテストその2 (2010-11-02 17:30)
 なるほど簡単だ (2010-11-02 16:52)
 別な地図表示方法の模索中 (2007-02-16 00:35)
 仮想日本一周徒歩の旅 (2007-01-12 23:59)
 散歩コース距離計測 (2007-01-07 17:50)
 書き初め Flash (2007-01-02 15:59)

この記事へのコメント
秋らしくて素敵な背景ですね。これからも季節毎にかえていただけるとうれしいな♪

私はWinXPのSleipnirで拝見しています。 バッチリです♪
Posted by ゲスト at 2006年09月07日 07:20
この写真は道北の朱鞠内湖の紅葉だそうです。
一応、CSSのベースが完成したのであとは背景写真を入れ替えていけば、季節ごとにできることになります。(^-^)

Sleipnirは、IEエンジンだと思うのでこの記事の時点では背景画像が非表示だったと思うのですが、この次の記事の修正でちゃんと表示されるようになったと思います。
うまくいってよかった。
Posted by ぞうさん at 2006年09月07日 14:46
そうそう。次の記事のほうにコメントすればよかったんですね〜。
朱鞠内湖ってそのまま「しゅまりないこ」って読むんですね。
朱色の手まりが「♪てんてんてんまり・・・」のように手がそれてその湖におこおちて。。なんて想像したのですが、検索してみると、アイヌ語で「石の多い川」の意味なんですね。

> 一応、CSSのベースが完成したのであとは背景写真を入れ替えていけば、季節ごとにできることになります。(^-^)

おぉ〜。楽しみです♪
どうぞよろしくお願いしますね。
Posted by ゲスト at 2006年09月11日 07:33
※このブログではブログの持ち主が承認した後、コメントが反映される設定です。
上の画像に書かれている文字を入力して下さい
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。

削除
Win IEをのけものにするようにCSS修正
    コメント(3)