Firefoxの最近のブログ記事

ウェブサイトの印刷時に遭遇した不具合とその対応をメモ。
印刷プレビューだとコードインスペクタも使えないし、なかなか原因が分からないですね。

印刷の最後に真っ白なページが出る（主にFirefox3、IE8、IE7）

ページ内のブロック要素にmin-heightを指定していると発生。印刷用CSSでmin-height: inherit min-height: 0などとする。inheritだとIE7でまだ空白ページが出た。
なお、印刷の途中に真っ白なページが出るのは、その前後のブロックのpaddingが原因の場合がある。

印刷の最初に真っ白なページが出る（主にSafari4）

先頭のブロック要素にpadding-topがある事が原因。印刷用CSSでpadding-top: 0に。

画像が印刷されない（Opera10）

印刷用CSSで、画像のwidth、heightに実際より小さい値を指定する。遭遇したケースの場合、600x848pxの画像に対し、width: 599px、height: 846pxを指定したら印刷された。

今時Operaのシェアなんて無きに等しいので、「印刷の際には別のブラウザを使用してください」という断り書きでもいいのではないかと思う。

Internet Explorer

• CSS Compatibility and Internet Explorer

Firefox

• Mozilla CSS support chart
• Firefox 3.5 for developers

Safari

• Safari CSS Reference

Chrome

Chrome 1.0がSafari 3.2とほぼ同様、Chrome 2.0がSafari 4.0とほぼ同様。

Opera

• Web specifications support

via. CSSの実装状況を知るには？ - Web標準Blog

• FireMobileSimulator.org

FirefoxでDoCoMo、au、Softbank携帯をシミュレートしてサイト閲覧、検証ができるアドオン。レンダリングだけじゃなく、位置情報の送信までできる。

なんて素晴らしいんですかね。心の底から拍手。

• ブックマーク同期のFoxmarksがXmarksに - サイトおすすめ機能追加 - マイコミジャーナル

Firefoxのブックマーク同期アドオン「Firemarks」が、IE、Safariにも対応になって「Xmarks」に。
サイトおすすめ機能はどうでもいいけど、クロスブラウザになったのはうれしい。

Firefoxでa要素やobject要素をクリックすると表示される点線は、CSSのoutlineプロパティで制御できる。
点線を消すならoutline: none。

今まで気になった事が無かったけど、Flashをクリックしたら点線が表示されたので調査。縦横共に100%だと点線は表示されない。ページの一部でも、embed要素の場合は表示されないっぽい。と思ったらobject要素でも表示されなかった。もちろんoutlineの指定は無いのに。何がトリガになって表示されているのかわからないけどとりあえず調査終了。

IEやSafariではスタイルシートが適用されるが、Firefoxではスタイルシートが一切適用されないという場合、ブラウザの表示モードが標準モードなら、サーバから「Content-Type: text/html」でCSSファイルが送出されている事が原因の可能性が高い。

表示モードが互換モードであれば、Content-Typeに関わらずFirefoxもCSSを解釈する。

互換モードなんてもう何年も使っていないから、クライアントから受け取った互換モードになるソースを書き換えるところでこの現象にハマッた。CSSファイルをtext/htmlで返すサーバというのもあまりない気がする。ひとまず半日で原因が突き止められて良かったとするべきか...。

Firebugに追加する事で使えるPHPデバッガ。

• FirePHP

• Gspace

Gmail領域にファイルをアップ、ダウンロードする事が出来る。

• FireShot

Windows専用。ページのキャプチャを取り、そのページにメモを付ける事ができる。

• SeoQuake

SEOについての情報を調べる。Google PageRankスコア、リファラ、del.icio.usの投票数など。