IE7のbackground-attachment:fixedのバグ対策
IE7のbackground-attachment:fixedのバグ対策を簡単に紹介
ログをみると、IE7(Beta2)のbackground-attachment:fixedのバグ?へのアクセスが最近頓に増えている。 IE7の普及とともに悩む人が増えているのだろうか。 お察しします^^;
一応、対策をまとめておくことにした。
現象の概要
IE7(Beta2)のbackground-attachment:fixedのバグ?でも述べているとおり、IE7で問題が発生するのは、background-attachment : fixed;
を適用しようとした場合に、その要素か親要素に、position : relative;
を指定している時である。
この時、IE7はそのrelative指定された要素の上辺を基準に画像を固定してしまう。
また、後続する要素の左paddingが失われて、その分の左marginが増えたような感じに描かれる。
ちなみに、親要素より遡った祖先要素にrelative指定してある場合は、画像の配置自体は正常だが←ウソでした^^;、背景画像そのものが適用されていません、やはり後続する要素の左paddingが失われる。
対策
IE7(Beta2)のbackground-attachment:fixedのバグ?でも述べているが、relative指定している要素に、あわせて幅を指定してやればよい。 しかし、幅指定したくない場合もあるので、以下に、このサイトのh2要素でのCSS指定を例に対策を書いておく。
XHTML側。
<link rel="stylesheet" type="text/css" charset="UTF-8"
href="http://asamuzak.jp/css/template.css" />
<!--[if ie 7]>
<link rel="stylesheet" type="text/css" charset="UTF-8"
href="http://asamuzak.jp/css/ie7.css" />
<![endif]-->
CSS側。
h2 {
background : url(../img/img0.jpg) center no-repeat fixed;
/* この例では、画像をセンターに配置 */
}
そして、ie7.cssでは、expression()を用いて次のように指定している。
h2 {
background-attachment : scroll;
background-position-y : expression(document.documentElement.scrollTop
- this.offsetTop - this.offsetParent.offsetTop
- (1064 - document.documentElement.clientHeight)/2);
}
画像の配置をscrollに戻し、その上で、expression()でその都度、画像を再描画させて結果的に固定配置させるという次第。 1064というのは元画像(img0.jpg)の高さ(px)で、縦にもセンタリングするためにやっているもの。
"IE7のbackground-attachment:fixedのバグ対策"へのTwitter上でのコメントやRT
1件のツイートがあります。
ツイート 1
これも押さえておいたほうがよさげ / asamuzaK.jp : IE7のbackground-attachment:fixedのバグ対策 http://t.co/3pTAlBFo @asamuzakjpさんから