銀河8丁目10番地の日誌

今までの日誌の目次を表示前の日誌次の日誌


真似しちゃいけないCSS入門(※嘘)  2009年07月05日(日)


最近、世間様の流れに乗っかったか逆らったかで、通常使用のブラウザをFirefoxに変えました。
なかなか好調だったんですが、Webサイトのレイアウトを、
Firefox寄りにちょこーっと修正したら、IEの表示が狂ってしまいました。

おおこれが噂のブラウザ誤差・・・としばらく感動(いやおかしいか)しつつも、
どうにも見逃せる誤差ではなかったため、無い知識フル稼働で何とかして直すことに。
とは言え、元々IE表示で上手く見れるように作っていただけに、
(逆ならともかく)本来なら狂うはずが無いんですよねぇ。
やっぱりフォント設定をいじったのがダメだったのかなぁ・・・。
ああ、その辺はド素人。どこをどう修正したら狂ったのか、てんで分かりません。

水平線、というか枠線なんですけれど。
テキストの真ん中くらいに使う区切り線を、下枠だけ1px表示して使っていたんです。
(この日記の目次とタイトルの間にある感じのヤツですね。hr使えば早い、なんて言ったら元も子も無い(笑))

枠線の余白指定がどうにも上手くいかない。IEだと、何故か余計に上部の余白だけ大きいのです。
この区切り線スタイルをサイト内で多用していたため、今更イチから書き直すのは面倒すぎる、
ということで、無謀にもCSSだけ修正して何とかすることに。
・・・いやできるだろう、きっと!! そのためのCSSだし(大見栄)

ちなみに「width」で幅を指定しなければキレイに表示されました。理由は知らん(阿呆)
いやでも枠線・・・そんなに長くなくても良い・・・(ズボラなくせに妙なこだわり)

素人ながらに色々と足したり引いたりしながら試した結果、
IEだと、枠線(を指定した透明なboxの中)に、
全体でフォント指定を掛けたサイズの、透明な文字が入っているような状態だと判明。

確かに、全体指定用のフォントサイズを変更すると、枠線の上余白も大きくなっています。
たぶん親boxの指定が子boxにも引き継がれるとか何とか、そんな感じなんじゃないかと。

え? 解決策ですか?
とりあえず、無理やり枠線用のフォントサイズをゼロパーセントに指定してみました。
(単なる区切り線なので、実際1文字も使わないのにも関わらず。つまり意味のない指定。)
記述上、枠線の上に透明な文字はあるけれど、小さすぎて誤差も見えない、そんな状態。
誤魔化しどころか、ド直球です。

どう考えても、もっとスマートなやり方が絶対にあります(笑)


パト / 宇宙書店

My追加