Keyword "IE対策" - 6 items
CSSでIEに疑似要素を指定する時の注意点
リニューアルに伴い、画像の拡大表示に「Fancybox」を利用する事にしましたが、拡大させたい画像にマウスカーソルを持っていっても、通常のリンクなのでマウスカーソルは「pointer」になり、拡大されるのかそうじゃないのか判断ができません。
ということで、FancyBoxで拡大する画像には、よくある虫眼鏡的なズームカーソルを表示させることにしたのですが、IE 8をはじめとする、全てのIEに適用させるために苦労したのでそのメモです。
Mac IE からのコメント文字化け対策
データベースが崩壊した旧サイトですが、Google 様のキャッシュや Internet Archive: Wayback Machine などのお力を借りて、8 割方記事を復活させることができました。今調べたら未だに残ってて、懐かしの旧サイト完全版が見れました。記念に前の記事で紹介している「Paparazzi!」を使って、キャプチャしておきました。いやいや、いいですね〜ミニバナー。もうこれに夢中でした（笑）。
なんて思い出に浸りたかったのではなくて、消えてしまった記事の中に未だに検索に引っ掛かってしまうものがあるので、ここで書き直そうと思ったわけです。
PHPでIE 6の後方互換対策
IEネタが続きますが、あまりに感動したので寝ずに書きます。IE6はCSSを自分勝手に解釈しますが、XHTMLもちゃんと読めません。例えば当サイトはXHTML1.1に準拠して構築してますが、お約束としてHTMLファイルの冒頭に
<?xml version="1.0" encoding="UTF-8"?>と記述する必要があります。ところが、IE6はこれがあると、なんかよくわからないんですけど「後方互換モード」でそのページを読み込みます。するとまあいろんな不具合が出てきて調整事がたくさんできるわけです。ならばXML宣言を書かなければいいとなりそうですが、そうすると他のブラウザで不具合が出かねません。ましてこっちは正しいことをいているのだ！
と憤っても問題は解決しないので、またまた「@Style」さんの記事「IE6に困ったら」を参考にさせていただきました。おっと、これはPHP限定なので、HTMLで構築されている方はご利用できませんのでご了承ください。
スターハックの代替手段
「@Style」さんからのトラックバックで知ったのですが、僕が多用しているCSSハックの一つ「スターハック」は止めなさいと、IEBlogで呼びかけているそうです…ってお前らのせいでどれだけ苦労していると…IE7が標準準拠すればいいだけだろうが！
と怒っていても問題は解決しないので、早速対策しました。
blockquoteに画像を使用
サイト休止時にいろんなBlogを見ていて「かっこいいなぁ〜」と思ったのが引用時に画像を使用していることでした。見た目だけでなく、直感的に引用していることがわかるし、さっそくまねすることにしました。ところが、またもやIEの野郎が他と違う表示をしたので、その対策メモです。
Windows IEでoverflowを有効にする
当サイトはご覧の通り本文部分がほそーいので、親要素の領域を越える幅を持つ子要素ができてしまう場合があります*1。CSS には「overflow」というプロパティがあり、指定した要素が、その幅や高さの範囲を超えた場合に、どのように振る舞うかを指定します。値は
- visible：表示する
- hidden：隠す
- scroll：スクロールバーを表示する
- auto：自動（ブラウザが判断）
- inherit：親要素の値を継承
の5つがあります。このときの動作が、Safari や Firefox と、IE で違ったのでメモしておきます。
