ちくしょーーー、
”何となく”という理由で
wordpressのスタイルシートをいじったら
ぶっ壊れて元に戻らなくなった。。。
なんとか、だいたい修理できたけど。
むーー、一日かかった。。。
もう疲れた。。。。
何でバックアップとっておかなかったんだろう・・・
ということで、勉強になった点をいくつかメモしておこうっと。
●まず、paddingを使って、縁取りに色をつけるならば。
borderをつかったほうがよい
#p img {
padding: 6px;
backgroundcolor:#000;
}これを↓の様にする
#p img {
border: 6px solid #000;
}
理由は、
IE、sleipnirブラウザでは、paddingでの設定が反映されない部分があった
理由はわからないけど、タイプミスは確認したので、ほかに理由があるはず。
firefoxはpaddingでも問題なかったけども。
ここはやはり、borderで設定したほうがよい。
左右上下、細かく指定するならば
#p img{
border-top: 0px solid #000;
border-left: 0px solid #000;
border-right: 12px solid #000;
border-bottom: 18px solid #000;
}
こんな感じで、それぞれ、上、左、右、下、と分けて設定する
詳しくはこちらのサイト様をごらんあれ
http://www.htmq.com/style/border.shtml
●フォントのサイズ指定に%を使わない
font-size: 120%;などと設定すると、
ブラウザでフォントサイズを変える操作をしなくても
なぜか大きさが切り替わることがある
スタイルシートのフォントサイズの指定に
少し問題があるのかと思われる。
安全なのは、
font-size: 0.6em;という風に設定すれば
一応問題なく表示されている。
これが起こるのはIEとSleipnir、
safariとfirefoxは問題ないと思う。
●ulリストのスタイルをnoneと指定しても
なぜか、firefoxだと»が表示されてしまう・・・・
もう、なんでだか分からないいし
調べるきもしなくなってきた。。。。
ただ、下手に打ち込まれたhtmlだと、ちゃんとnoneが反映されて
リストのマークは消えるんだけどなぁ・・・
●firefoxとie、sleipnirでfooterの表示が確実にずれる。
これは、今まで”運良く気がつかなかった”だけで
どうやら、forefoxとIEではずれが出ている様。
ノーマルな設定でもIEで1pxずれる事を確認した。
何でだろう・・・・。
変なスタイルシートの書き方はしていないと思うんだけど。
あと、 clear: both;はきちんと入れておこう・・・
とにかく
IE、sleipnirとfirefox、safariで見た目が結構変わるところがあるので注意
ほかの、ブラウザは知らない・・・・
あー疲れた・・・・