IEの独自フィルタでグラデーションをかけるのはキケンだ。

最近は規約がなければhtml5とcss3を用いるようにしている。
プログレッシブ・エンハンスメントという考えのもと、IE8以下に関しては角丸などを無理に実装せず、使用に支障のない内容にしている。

CSS3にはグラデーションが設定できるので、Firefox・safari・chromeについてはcss3で、IEには独自フィルタでグラデーションを設定する事にした。

そこで問題が発生。

IEにおいて、a要素のdisplay:blockが効かない事が発覚した。

“IEの独自フィルタでグラデーションをかけるのはキケンだ。” の続きを読む

IE6で文字が二重表示される怪。〜次から次へとIEめ。

はあはあ・・・
今日はバグつぶしの日ですか・・。( ̄▽ ̄;

さて。

IE6の場合。コメントが二重に表示されることがあります。
——————–
リンゴあります。
——————–
で終わっている文章があるとする。

なのに、IE6様で見ると、
——————–
リンゴあります。
あります。
——————–
・・・「あります。あります。」って・・。( ̄▽ ̄;

本当は「リンゴあります。」で文章は終わっている。なのにIE6で見ると「あります。」が次の行にも表示されている。HTMLを確認しても、ケアレスミスではなさそうだ。

ではなぜ?

“IE6で文字が二重表示される怪。〜次から次へとIEめ。” の続きを読む

CSSでbodyに設定した背景画像がIEでずれる怪

またしてもIE。おのれIE。
バグ多すぎだよ、アナタ( ̄▽ ̄;
CSSでbodyに背景画像を中央揃えで設定すると、IEでは左に1pxずれます。
safariやFirefoxではずれないので、またしてもIEお得意の「バグ」です。
IEを優先して調整したりすると、正しく描画しているsafari&Firefoxがずれます・・ダメすぎるよIE。
1pxぐらいのずれだと、そんなに気づかないことが多いんですが、たとえば

  1. W800pxの背景の左右に1pxのボーダーを引く。
    上から下までボーダーを伸ばしたいので、CSSでbodyの背景画像として敷き詰めて、位置は中央揃えにする(背景画像はボーダーを入れるのでW802px)。
  2. その上にW800pxのコンテンツを配置する。そうすると、コンテンツの左右には1pxづつボーダーが見える。

・・ハズなんですよ。正しく描写してれば。
でも、IEは正しく描写しない。
左右にあるはずのボーダーのどちらかが消えてしまう。つまり、他のブラウザに比べて「中央揃え」が1pxずれてるのだ。

“CSSでbodyに設定した背景画像がIEでずれる怪” の続きを読む