差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
|
html:css [2011/02/12 13:22] miyako 作成 |
html:css [2011/07/05 08:38] (現在) miyako |
||
|---|---|---|---|
| ライン 9: | ライン 9: | ||
| これはIEやOperaなんかをFirefoxのCSS解釈に変更してくれるようです。 | これはIEやOperaなんかをFirefoxのCSS解釈に変更してくれるようです。 | ||
| + | |||
| + | ===== INPUTタグのフォント ===== | ||
| + | Formを作っているとtypeが"text"と"password"でボックスサイズが違う | ||
| + | |||
| + | もちろんIEだけである（汗 | ||
| + | |||
| + | なんだろうとGoogle先生に聞いてみたところ… | ||
| + | [[http://support.microsoft.com/kb/831331/ja|これが原因]] | ||
| + | って事がわかった。 | ||
| + | |||
| + | まぁ、簡単にいうと、WindowsXPからはinputタグのフォントを | ||
| + | <code> | ||
| + | <input type="text"> "MS UI Gothic" | ||
| + | <input type="password"> "Tahoma" | ||
| + | </code> | ||
| + | に変更したからよろしくね | ||
| + | |||
| + | いやいやいや、なぜに別のフォントにするかな（汗 | ||
| + | |||
| + | なんてツッコミを入れてもゲイツくんは無視をするわけだ、なのでCSSで以下の様に設定 | ||
| + | <code> | ||
| + | input | ||
| + | { | ||
| + | font-family:メイリオ;font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | なんとなく、bodyタグに対してfont-familyを設定すれば良いと思ったのだが、設定が間違ってたのかうまく反映されなかった。 | ||
| + | |||
| + | 時間がある時にでも確かめてみるさ | ||
| + | |||
| + | ===== IEとそれ以外のブラウザでbodyの文字サイズを統一する ===== | ||
| + | IEのCSS解釈は相変わらずダメダメだわ | ||
| + | |||
| + | そんな訳でCSSでIEとIE以外のフォントサイズを調整する方法 | ||
| + | <code> | ||
| + | body | ||
| + | { | ||
| + | // IEの場合 | ||
| + | font-family : 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; | ||
| + | font-size : 75%; | ||
| + | } | ||
| + | |||
| + | html>/**/body | ||
| + | { | ||
| + | // IEじゃない場合 | ||
| + | font-family : 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; | ||
| + | font-size : 12px; | ||
| + | } | ||
| + | </code> | ||
| + | |||
| + | これでかなり統一感がでるけど、完全じゃないし、IEの下位互換やニッチなブラウザでは確認出来てない＾＾； | ||
