車・自動車SNSみんカラ

この記事についてTwitterでつぶやく この記事についてブログを書く この記事をお友達に教える  イイね!
2005年11月26日
みんカラ提供のスタイルシートと IE のバグ
スタイルシートが開放されてはや 8 か月近く. "多少" の域をまだ出ていませんが, 今では選べるテンプレートも多くなって来ました. ところで, トップ画像まわりが不審な挙動をするのに以前から気付いていました.
しばらく前に真面目に解析して, おかしい指定がされている部分がやっと判りましたので, 参考 & 自分の備忘録として書いておきます. 症状としては, テキストの位置を変えると Mozilla でブラウズしたとき, 画像のように, トップ画像とその下のタブメニューの間に無意味な空白が空いてしまうというもの. Internet Exploer では大丈夫です.

実はこれ, みんカラのスタイルシートの書き方が悪いのだと思っていたのですが, その後色々調べていたら, 実は Internet Explorer のバグだということが判りました. みんカラは, IE のバグに依存したスタイルシートを使ってしまっているという訳ですね (IE も 6.0 からは不具合が治っていますが, あまりにも不具合に依存したサイトが増えているため, 特定の DOCTYPE を指定したときのみ, 不具合が修正され, それ以外は不具合を残した "後方互換モード" で動作するそうです). まぁ, そういう意味ではみんカラの書き方も悪いのですが.
ちなみに, みんカラのソースでは DOCTYPE 宣言はありません(-_-;

さて, その不具合が起きる場合とは? デフォルトの状態では大丈夫なのですが, 画像を入れるためカスタマイズしてイジっている人にはその不具合を引きずっている人も多いかと思います. つまり, スタイルシート編集において "カスタマイズ [ 上級者用 ]" を使っている方で, トップ画像を入れている方が対象となります.

見分け方. 関係するのは #Header と .BlogTitle です. スタイル編集画面で #Header・.BlogTitle を探してください. #Header に次のように padding: が入っている場合, 不具合が発生している可能性が高いと思われます.
padding:20px 0px 0px 40px;
例えばこんな感じ:
#Header {
    background-image: url('...');
    width: 748px;
    height: 170px;
    padding:20px 0px 0px 40px;
    background-repeat: no-repeat;
}

.BlogTitle {
    font-weight: bold;
    font-size: 24px;
}
このセクションの意味を簡単に解説します. #Header は, トップ部分全体のスタイルを決めるもの. .BlogTitle はその中にある, Blog のタイトル文字列のスタイルを決めるもの. #Header の中の
padding:20px 0px 0px 40px;
は, ボックス内のテキストにどれだけのすき間を空けるかを指定するものです. スタイルシートの上下左右は訳判らん順番になっていて, それぞれ上・右・下・左のサイズです. この場合「上から 20 ピクセル, 左から 40 ピクセルのところからテキスト (.BlogTitle) を始める」という意味になります.
IE5.5 までと, IE6 の "後方互換モード" ではこの width と padding の関係の解釈にバグがあり, 正しく表示されません. みんカラは, その IE (Opera も同様動作です) に依存したスタイルシートにしてしまっているため, 逆に, 正しく解釈する Mozilla や Firefox ではずれて表示されてしまいます.
バグの詳細は先ほども紹介したページやこちらのページに譲ります. ここではどうすれば回避出来るかを簡単に紹介します. この不具合は, width と padding を併用することによって起きるので, 上記のような指定があったら, 次のように修正します (太字部分を追加):
#Header {
    background-image: url('...');
    width: 748px;
    height: 170px;
 /* padding:20px 0px 0px 40px; */
    background-repeat: no-repeat;
}

.BlogTitle {
    position: relative;
    top: 20px;
    left: 40px;
    font-weight: bold;
    font-size: 24px;
}
こうすればずれません.
ブログ一覧 | みんカラ
Posted at 2005/11/26 04:10:16
イイね!
イイね!
タグ
みんカラ スタイルシート CSS
トラックバックURL
スポンサーサイト

この記事へのコメント
コメントはありません。


プロフィール
「いつもどおり。」
何シテル?   02/22 22:22
(2006.07 に "AXELA" からハンドルを変えました) アクセラならびにプジョー 206 CC に関するブログを中心に構成して行きます.AXEL...
ユーザー内検索
<< 2010/8 >>
1234567
891011121314
15161718192021
22232425262728
293031    
お友達
どなたでも歓迎なのでお気軽に誘ってください.

……が,コメント等でのやり取りがない方,ブログ登録のない方からの "お誘い" はご遠慮させていただくことがあります.
23 人のお友達がいます
あっちゃん♪ * おしびさん *
miyamoto * (ノリノリ)
むーぞう ぐりふ
ファン
5 人のファンがいます
QRコード
QRコード
このブログを携帯でご覧になれます
©2010 Carview Corporation All Rights Reserved.