ヘッダ位置の画像がずれてる

CATEGORYブログ
気が付いたら、ヘッダの位置にある画像がずれてる。
20160624-d1.png

ちょうど、uBlock Origin を導入したところだったので、それが悪さしているのかと思ったけど、どうやら違うようだ。

原因は、FC2 ヘッダーバーの外部スタイルシート http://static.fc2.com/css_cn/common/headbar/120710style.css にある以下の記述。
html {
    position: relative;
    top: 27px;      /* こいつが原因 */
}
/* for all IE only */
html {
    position: static\9;                  /* それにこいつ */
}
body {
    margin-top: 27px\9;               /* あと、こいつと */
    background-position-y: 27px;   /* こいつ */
}



多分、ほとんどのテーマがヘッダーバーのサイズを考慮しているはずなのに、自分の高さ分だけずらしているつもりらしい。
更新日が 2014-4-16 のこいつが、なんで今さらという感じはするのだけれども。
Firefox 49.0a2 で見てるからだ。
550426 – Add background-position-x and background-position-y (to make it easier to change one without the other)

Firefox は、background-position はサポートしてるが、個別の -x、-y をサポートしてなかった。
それが Firefox 49.0a2 のインスペクタで見ると background-position-y が有効になっている。
でも、\9 は不当な値として解釈されないから、それでずれるんだ。


自分のテンプレートのスタイルシートに以下を追加。

html {
    top: 0 !important;      /* ← 27px */
}

div#container {
    margin-top: 87px;       /* ← 60px */
}


20160624-d2.png


ヘッダーバーのスタイルシートは、テンプレートよりも後に記述されているので、html の top には !important が必要。


関連記事
スポンサーサイト

Firefox

0 Comments

Leave a comment