IE7+メイリオのline-height問題

メモ書き程度。

今、参加サークルさんのＨＰデザインを行っているが、そこに問題発生。

font-familyをメイリオにすると、line-heightがおかしくなる。

検索してもあまりヒットせず、ようやくたどり着いたのがこちら
対応法がこちらに載っていたので参考にします。

つまるところ、フォント自体に問題があるっぽい。
でもFF、GC、Operaだと問題がないので、IE7と組み合わせで発生している気がする。

IE7かつメイリオフォントが適用された場合のCSSを書くことで対応します。

ただ、うちにVistaがないので、VistaのIE7の挙動が確かめられない･･･
XP版と同じ挙動ならいいんだけど。

CSSハックする前に･･･

各ブラウザのバグや仕様を調べましょう･･･っと。

Web2.0（古語）っぽい感じの、角が丸いレイアウト。
CSS3が勧告されれば簡単に指定できるみたいですが、現状で対応しているのはFFとSafari(GC含)のみ。

CSS2でも無理やりできるみたいですが
http://gigazine.net/index.php?/news/comments/20060525_rounded_corner_css/
行数が無駄に増えたり、JSを使うのでやりたくない。

やっぱり、「HTMLに情報を書き、CSSで見た目を定義する」という勧告に則りたいので。
JSはただ単に嫌いなだけです（ぉ

ということで、古典的な方法の画像を使うことに。

ヘッダ。
これは余裕。何も考えずimgタグで呼び出せばいい。

ボディ。
DWのプレビューで見ると正常。でもプニルで見るとボディとヘッダの間に隙間が開く。
マイナスのマージンで対応。するとOpera先生とか藍様でかさなっとる。

これはCSSハックか？！
と思ったけど、どうやらIEの「仕様」らしい。

http://ameblo.jp/css-memo/entry-10015168645.html

ということで、

img { vertical-align: top; }

で解決。
う～ん、これはスマート。

しかし忍者のエディタ、バグ多すぎである。IME動かなくなるとかどんだけー

IE8を擬似的に実装できるスクリプト

HTML5ではCSSで使える要素が増えるみたい。

ところで、今開発してるソフトのデザインで
「どこにフォーカスがあるのかわからない」
というフィードバックが来てた。

素直にGC使えよ･･･と思うんだけど、
なんとかフォーカスの合ってるElementを取得して
背景色と罫線の色を変えるスクリプトを作ってみた。

んだけど、バグだらけだったので放置（ぁ


ある日、IE8.jsなるものを発見。

使い方は簡単で、head内で呼び出すだけ

<!–[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js" type="text/javascript"></script>
<![endif]–>
 

（IE8で誤作動を避けるためコメントアウトします。）

あとは、CSSで

input:focus{ ~ }

としてやれば、GCっぽいデザインをモダンブラウザで実装できるようになります。

ほかにもいろいろ使えそう。
デモページで確認してみるよ幸せになれると思うよ。