GMS表示ずれの件、他いろいろ(ん)

皇紀2678年12月29日

パンヤの連夜の再延長メンテでゲームが出来ない腹いせ(?)もあり、GMSシステム+パンヤスキンのIE7における表示ずれについてσ(o^_^o)の忘備録も兼ねて、その対策を書きます。(ん)

なお、GMSシステムのバージョンは 1.63、パンヤスキンのバージョンは 0.97b の場合です。

まずは、IE6で見た場合

GMS

 

FireFoxで見た場合

 

GMS

 

IE7で見た場合

 

GMS

 

IE7で見た場合、赤枠部分がずれてますね。
これは、IE7のブラウザエンジンの内部動作が変更になった影響で、タグで指定していない時の既定の背景画像の表示位置が、中央配置から左上になったためです。また、<img>タグのデフォルトの位置がボトム位置になっています。
これをIE6で見た目同じになるように調整します。
GMSでの表示はスキンファイルによって行われてて、しかも表示デザインはスタイルシート(css)によって決定してますので、とてもエレガントに出来ています。すばらしいですね(拍手)
そこで、表示位置を直すためにはスキンディレクトリにあるスタイルシート(style.css)を少しいじります。
ついでに、多少改造を加えます(ん)

 

 

以下順に説明します。変更するファイルはstyle.cssです(まじ)
(1)h3.member-head{}内に以下を追加します
background-position: center bottom;
line-height: 22px;
(2)h3.member-head{}の以下のパラメータを変更します
padding-left: 15px;
(3)p.member-foot{}内に以下を追加します
background-position: center top;
line-height: 23px;
(4)p.member-foot{}の以下のパラメータを変更します
padding-left: 15px;
(5)span.emoji img{}の以下のパラメータを変更します
vertical-align: baseline;
(6).control-button a {} ,
.control-button a:hover {},
.control-button a:active {},
.control-button a:visited {},
.control-button a:visited:hover {},
.control-button a:visited:active {} 内に以下を追加します
background-position: center center;
line-height: 19px;
(7)先頭の* {} を削除して代わりに以下の文を追加します
@import 'reset.css’;

以下のスタイルシートを reset.cssで style.cssと同じ文字コードで保存します

html{
    color:#000;
    background:#FFF;
    word-break: break-all;
    word-wrap: break-word;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,object,embed { 
    margin:0px;
    padding:0px;
}

fieldset,img { 
    border:0px;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
blockquote:before, blockquote:after, 
q:before,q:after {
    content:'';
}

abbr,acronym { 
    border:0;
}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}

(8)アップロードします
これで、ずれはなくなりました

 

GMS

 

ただ・・・・FireFoxで見ると若干ずれてるんですよねぇ~(しょぼ)
引き続き調査します・・・・(かなし)

HTML(CSS)

Posted by まっちゃん