PROFILE
Template
【HTML・CSS】 (追記:2007.8.29)IE7でbodyの背景が拡大/縮小されない!【IE7対策】
近況とかその他諸々はまた後ほど。
えーと。
表題の件について困っている方をチラホラ見掛ける様になりました。
ついにはmixiのCSS関連コミュでも見掛ける様になりました。
検索かけてみるとコレの対策の具体案て無いんですね。
コレの対策を偶然ですが見つけましたのでお知らせしますです。
■CSSで回避
html{
background-color:#ffffff;
height:100%;
width:100%;
}
body{
background-color:#ffffff;
background-image: url(FILEPATH);
margin:0;
padding:0;
height:100%;
width:100%;
}
html>body{
height:auto;
}
htmlの背景色とbodyの背景色は同じものにしておくことをオススメします。
bodyとhtmlの高さや幅の指定ですが、bodyの内容がウィンドウの長さより短かった場合、bodyの内容分しか表示されないので指定してあります。
追記:20070829
firefoxで内容がウィンドウの高さ以上になったら背景画像が途切れてました;
↑の緑部分を追加することでそれを回避。
参考及び理由はhttp://gyauza.egoism.jp/clip/archives/2007/05/070509-background-clip/
がわかりやすかったです。
■htmlで回避
たいていの人がいわゆる「標準モード」で作成していると思います。これを「互換モード」にしてやると回避できます。
■回避できる理由
さぁ?(笑)
発見は別のことを実現したくてCSS弄ってたら、上記のような方法を見つけただけなんで。
個人的解釈では、拡大/縮小を行うためには「haslayout」というIE独自のプロパティをtrueにしなきゃならんそうですが、そのスイッチがhtml{background-color:#ffffff;}とすることで入るんではなかろうか、と。
(試しにhtmlに背景画像を入れてみたら、htmlの背景画像は拡大/縮小されなかったんですよねぇ)
■補足
bodyの背景って、IEだと1pxズレるって話あるじゃないですか。
あれは健在です。
IE7のズーム機能、中途半端だなぁ;
さて、続きにて近況や、この対策を発見した経緯なんかを書きますか。
↓
7月末から8月中旬にかけて、ものすごくやる気なしモードに突入してました。
休みもコレと言って特に何もせず。あ、久々にクラブ行ったか。でもそのくらい。
んで、最近なんとか覚醒しまして、バリバリお仕事してます!
毎日残業です!!
orz
■対策を見つけた経緯
きっかけはder Gegenwartのrusicaさんのhtmlソース。
この方はdivが嫌いらしい。でも、背景色は灰色、コンテンツは白、と分かれていて、「ん?どうやって実現してるの??」とソースを拝見。
で、色々拝見させていただいて、bodyに幅を、htmlに背景色を指定していたんですわ(IE6だと背景全部が真っ白でウィンドウ幅いっぱいになってますが、IE7、Firefoxではそうなってます)。
んで、すごく今更だけど、htmlにもCSSって指定できるんだよね。
そこで閃いた。
背景画像をdivを使わずに二つ表示出来るんでは?
ってことで、bodyとhtmlを中心にCSSを弄ってたんです。
でその過程で、IE7のズーム機能をポチポチ押してみたら、ん?なんだこの違いは??ってことで、目的はいつしかIE7のズーム関係に。
一応、当初の目的も色々納得いきましたけどね。
偶然の産物ですが、なかなか使えると思うので書いてみました。
何事も閃きって大事。
<< postkun(ポスト君)を使ってみた。|MAIN|生存報告。。。 >>
Comment
mixiで拝見してスゲー!って思ってました 笑
どうもzoom機能は挙動がよく分からなくてorz
大変参考になりました。ありがとうございます。
尊敬の眼差しですよ!
何か毎日お忙しそうですが
残暑に負けないよう頑張ってください♪
from: 深玖 | 2007/08/25 8:10 AM
どうもご無沙汰です;
平日ずっとPC漬けなため、休日はややPCから離れ気味です。。。
mixiの方は、ちょうどコレを発見して会社内でわらわら騒いだ後で質問のトピック立ってるの見つけて、なんてタイムリーとか思いましたよ。笑
mixiに入ってない人、あのコミュに入ってない人向けに早々に記事を書きました。
皆さんのお役に立てればコレ幸いw
まだまだ暑い日が続きそうですねー
深玖さんも暑さに負けずにお過ごしくださいませねw
from: 冥 | 2007/08/27 9:56 AM
今更ながら、突っ込み申し訳ありません。
気がついたのでコメントさせて頂きます。
上記の方法で、
緑色の部分、
html>body{
height:auto;
}
を指定してしまうと、下記のbody直下のDIV等のボックスで、ウィンドウに合わせて100%表示、内容量が多いときは、autoの設定が無効になってしまい、併用できなくなります。
http://gyauza.egoism.jp/clip/archives/2007/05/070509-background-clip/
つまり、
body背景が途切れる問題は解決しますが、
新たに、body直下のDIV等のボックスがウィンドウに合わせて100%伸びなくなります。
おそらく、
html>body{
height:auto;
}
で、bodyがデフォルトのautoになったので、直下のボックスでmin-height100%にしても、AUTOになってしまうのでしょう。
from: トキヤ | 2010/02/19 2:32 PM
Trackback
トラックバックURL :
IEで背景が拡大縮小しないクライアントから「IEでCtrlと+、Ctrlと-で拡大縮小していくことでレイア... SOHOカアチャン通信 | 2009/06/09 2:59 PM
NEW ENTRYS
- 生存報告とか色々なお知らせ (12/28)
- 生存報告とお知らせと宣伝と (08/21)
- CSS Naked Day だそうです。 (04/09)
- gift (03/28)
- エントリが1ヶ月おきな件について (03/24)
COMMENTS
TRACKBACK
- JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ buggy_trekkerの学習帳 (10/24) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ Memoのメモ (08/23) - (追記:2007.8.29)IE7でbodyの背景が拡大/縮小されない!【IE7対策】
⇒ SOHOカアチャン通信 (06/09) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ WEB制作会社のメモ帳in徳島(ホームページ作成Tips) (11/18) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ btmup Blog [tech] (11/04) - JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)
⇒ Bowz::Notebook (03/12) - Twitterな話。
⇒ COLORFULLIFE (05/16)
ARCHIVES
- December 2010 (1)
- August 2009 (1)
- April 2008 (1)
- March 2008 (2)
- February 2008 (1)
- December 2007 (1)
- November 2007 (1)
- October 2007 (1)
- August 2007 (1)
- July 2007 (2)
- June 2007 (10)
- May 2007 (4)
- April 2007 (9)
- March 2007 (16)
- February 2007 (17)