Mozilla FireFoxの･･･

･･･CSS3.0への対応がハンパない件。

他のブラウザでは、好き勝手な拡張も多く CSSの宣言もVenderPrefixの記述を要するモノが少なくない中、
火狐系はそれにを必要としないよう対応を完了している。

･･･で、御他聞に漏れず それに甘えてCSS記述してると、他のブラウザで表示がエラいコトにww

おきつねさまの配信ページの背景画像のブラウザウィンドウへのオートフィットの記述は、CSS2.x時代の 苦肉の策だったモノから
この度 背景画像を描いて貰ったので レイアウトすべくCSSを書き換えついでにver.3.0に準拠させてみるコトに。
各種解説サイトにもあるコトだし、素直にベンダープレフィックスで記述したのだが ナンか機能しない･･･

ので 敢えて定義を通常記述したら動作したww

最近は対応良くなったんだなぁと 他のブラウザでも同様nanoだろうとばかりに手放しで喜んでたんだが、そんなには甘くはなかった（；^ω^）
先頃、おきつね配信の andoroidタブレットのブラウザでの表示がエラいコトなってると報告を受けたので 早速書き直す･･･


変更前･･･

body
 {
  color: #ffffff;
  background-color: #1e50a2;
  filter: alpha(opacity=100) !important;
  -moz-opacity: 1.0 !important;
  opacity: 1.0 !important;
 }

/* ↓↓ body background-image代替定義 － 定義の値は全て固定 ↓↓ */

#bg_frame
 {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #1e50a2;
  z-index: -6;
 }

#bg_img0000
 {
  width: 100% !important;
  height: 100% !important;
  background-color: #1e50a2;
  background-image: url(http://www.fastpic.jp/images.php?file=0282478691.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-clip:border-box;
  background-origin:border-box;
  background-size:contain;
  z-index: -5;
 }

/* ↑↑ body background-image代替処理 ↑↑ */



火狐系は 最新の物さえ適用してあればベンダープレフィックス要らなかったんだが･･･


変更後 － 火狐以外のベンダープレフィックスを追記

body
 {
  color: #ffffff;
  background-color: #1e50a2;
  filter: alpha(opacity=100) !important;
  -moz-opacity: 1.0 !important;
  opacity: 1.0 !important;
 }

/* ↓↓ body background-image代替定義 － 定義の値は全て固定 ↓↓ */

#bg_frame
 {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #1e50a2;
  z-index: -6;
 }

#bg_img0000
 {
  width: 100% !important;
  height: 100% !important;
  background-color: #1e50a2;
  background-image: url(http://www.fastpic.jp/images.php?file=0282478691.png);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-clip:border-box;
   -webkit-background-clip:border-box;
   -o-background-clip:border-box;
   -ms-background-clip:border-box;
  background-origin:border-box;
   -webkit-background-origin:border-box;
   -o-background-origin:border-box;
   -ms-background-origin:border-box;
  background-size:contain;
   -webkit-background-size:contain;
   -o-background-size:contain;
   -ms-background-size:contain;
  z-index: -5;
 }

/* ↑↑ body background-image代替処理 ↑↑ */



コレでダメなら もう知らんよ。 って世界。

他のブラウザベンダの対応の悪さのほうが余程問題なんだよな、トクにMSのは最悪過ぎる。
ググるさんトコもCSS3.0に対しては準拠しきれていないようだし、ナニやってんだろね┐( -д-)┌ 


p.s.
imgオブジェクト相手なら CSS2.0でも全てのブラウザで出来る処理だから、ブラウザ自体にその処理能力がナイ訳ではないんだよ。
その上で、オブジェクトの背景画像に対して オブジェクトのサイズに自動フィットさせる定義が CSS3.0で追加されただけ。
たったそれだけの違いを 対応出来ないほうがおかしいんだよ･･･

あと、語弊なきように添えると、bodyに対して宣言するbackground-imageに対しては
ブラウザのウィンドウサイズにフィットさせる宣言は 今のトコロ まだ無いので。

と云うのも、body は ページの全てを著すから、コンテンツがウィンドウサイズを越えてる時点で、
背景画像は そっちにフィットするよう動作するからねw