忍者ブログ
25 November

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

16 October

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

メモ書き程度。

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

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

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

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

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

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

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動かなくなるとかどんだけー

02 October

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っぽいデザインをモダンブラウザで実装できるようになります。

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