スポンサーサイト

--年--月--日 --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブラウザIE8 IE7 IE6 対応 2

2009年08月15日 15:16

どうかなぁ。。

IE8だろうと、IE7だろうと直ったはず!!

他のブラウザはやってないです。。。
うん、思ったけど、それらも含めて統一してくれと言いたいw
仕事もそうだけど毎回あんたら(safari、OPERA、IEバージョン etc...)のせいでバグが出るんじゃ!ボケェ!
最近Googleもブラウザ出しおってテストの工数が増えるだけじゃ!ボケェ!w

と、不満を言ってスッキリ^^
とりあえず、このブログはIE推奨ってことで・・・w

さて、なぜバグってたかというと。
IE7でのバグ?みたいだけど、marginが正しく機能しないというワナ。
というより、IE7が正しくて、IE6がおかしいっていう話ですかね。
よくわからんす。

結論からいうと楽してた自分が悪いんですw

まずはバグってたころのヘッダー画像。
ブラウザの違うを知る01
このヘッダー部分にはタイトル部分とカプコンさんの著作権のを表示させるために
帯を入れてたのですが、それが狂ってこうなった。

その問題となったソースは以下。
#title {
margin : 0 0 360px 0; → ココ!
background-image : url("http://");
background-repeat : repeat;
background-position : center bottom;
width: 100%;
}
まず最初に試したがmagin : 0 0 360px 0;部分の微調整ww

が・・・全くうまくいかない!orz
やっぱmarginは ダメぽ みたいなので他の方法に切り替え!

そもそもtitle部分で上の帯と下の帯をコントロールする事体間違ってるもんだ。
ということで、「title」部分と下の帯部分「introduction」クラスを追加し、分けることにした。

下のように変更。
#title {
margin : 0 0 360px 0; → height : 50px; #タイトル部分の高さを固定!
background-image : url("http://");
background-repeat : repeat;
background-position : center bottom;
width: 100%;
}

で、下の帯部分を
#introduction {
margin-top : 325px; #マージンで上からどれだけ空けるか指定!
height : 25px;  #で、帯の高さを指定!
background-image : url("http://");
background-repeat : repeat;
background-position : center bottom;
display : inline-block;
}

これであたかも表示されてるように修正!w
正直、やけくそですm(_ _)m
ブラウザの違うを知る02

最後に、これはあくまで自分のブログソース内での方法であり、根本的な解決ではありません。(←最初から言え!って感じですね)
でも、marginは色々と問題があるので表示がおかしくなった際は、margin部分を注目してください。

さて、表示は直ったので次回は、クソ重くなったJavaScriptの改善をしようと思います。
ではノシ


コメント

  1. 薫 | URL | W4gcG/Bk

    Re: ブラウザIE8 IE7 IE6 対応 2

    どうもです!!
    良かった。IE7でも大丈夫そうですね^^

    marginじゃなく、widthとの相性ですか・・・
    もしや・・・!!
    あのwidth:100%との相性が悪かったのか><
    ふむぅ。。
    よく調べるとそういうのもあるみたいですな。

    とりあえずchromeでも見れるようになったってことで
    安心♪

    帰ってくる際はお気をつけて帰ってきてください!
    ではまたノシ

  2. RINZ | URL | mQop/nM.

    Re: ブラウザIE8 IE7 IE6 対応 2

    chromeでは普通に表示されるように直ってるね
    IE7もとりあえず大丈夫そう

    PHSカードで使うノートだから
    chromeがいろいろ都合いい
    (Java Scriptの処理が早い)
    だから残りの環境がちと今手元にない。

    IEはmargin指定が悪いんじゃなく
    width指定とmargin指定両方あると
    表示がバグるんじゃなかったかな。
    (数年前からちらほら話題があった気が・・・
     でもちと記憶があいまい?)

コメントの投稿

(コメント編集・削除に必要)
(管理者にだけ表示を許可する)

トラックバック

この記事のトラックバックURL
http://mhfkillerloop.blog95.fc2.com/tb.php/320-1d1fb4e1
この記事へのトラックバック



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。