ブラウザの最近のブログ記事

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

印刷の最後に真っ白なページが出る(主に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のシェアなんて無きに等しいので、「印刷の際には別のブラウザを使用してください」という断り書きでもいいのではないかと思う。

Microsoftが提供する無償ツール。IE6~8の表示確認が可能(ただしIE7、IE8はマシンにインストールされているバージョンのみ)。ダウンロードは以下から。

使ってみたけど、リンク先ページへの遷移がクリックでできないっぽい。毎回URLを直打ちしなきゃいけないって事か?本当に?

ちなみに他にもこういうものがあるが、いまいち信頼できずVMware Player上の実OSで確認。
使った事はないんですが、「実は実機のIEと表示が違いました」という事がありそう&ホストOSに悪い影響がありそうで...。

以下はSafari CSS Referenceの-webkit-transitionに関する項目も和訳かつ要約です。

以下はSafari Visual Effects Guide: Transitionsの和訳、要約です。

下記を読むと、touchstart、touchmoveと同様にtouchendでもevent.touches[0]が使用できそうに読み取れる。

しかしtouchend時点で指が離れているので、touchendでは使用できないので注意。
iPhoneのSafariでtouchendイベントを使うときの注意 - digital matterを参考にさせて頂きました。感謝。

Internet Explorer

Firefox

Safari

Chrome

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

Opera

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

各種バージョンのIEを同時実行させてしまうプログラム。Internet Explorer Developer Toolbarまでもが同梱されているというのが涙もの。
過去に色々IEの共存を試してきたけれど、これは決定版という感じ。IE8も正式リリースされた今、ありがたいツールです。

赤字部分には「IEをプライマリブラウザとして使わない事。IE特有の問題に時間を割きたくなければ、ビジターにMozilla FirefoxSを使わせよう」と書かれている。FirefoxSって?と思ってリンク先をクリックしてみたら、最後までよく読んでませんが「IE最悪」「Firefox最高」的な事がずらずらと書かれ、ゴミ箱にIEを放り込んでいる絵が。FirefoxSというのはユーザーにFirefoxを自動ダウンロード、インストールさせる為のツールらしい。作者のIEに対する怨念が伝わってくるw

実際、IEを切り捨てるわけにはいかないけれど、もういい加減IE6はできれば切り捨てちゃう方向に持って行きたいです。

via. IE1, 2, 3, 4, 5, 6, 7, 8の確認が同時にできる -Internet Explorer Collection - coliss

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

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

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

かなり特殊な現象で、解明に苦労したのでメモ。

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

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

ico形式に間違いがないのに表示されない場合、キャッシュと同時に履歴もクリアしてみること。
IEは初回アクセスでfaviconが見つからなかった場合、それを記録しておき、2回目以降取りに行かないそうで。

via. favicon(ファビコン)に少しはまる(IE7で表示されなかった訳) - WEBプログラミング NOW!

Vista 32bit上のIE7

詳しくは見せられないので分かりづらいですが、下の方の点線がフッタです。これは正常表示。

Vista 64bit上のIE7 32bit版

clearfixが効かず、フッタが上の方にきて重なってます。

Vista 64bit上のIE7 64bit版

これも正常表示。

これは困った。ここまで対応してたら年が明ける。
マシン固有の問題だろうか。ひとまずMicrosoftに報告しよう。

IEのHTTPヘッダをエクスプローラバーに表示。ダウンロードはieHTTPHeaders - Blunck Softwareから。

地道に調べてみた結果。フォントサイズ60~120%のサイズ。フォントはWinがArial、MS P ゴシック。MacがHelvetica、Osaka。

Microsoft Internet Explorer独自のスタイルプロパティ。以下はbehavior Attribute | behavior Property - MSDNの和訳かつ要約。

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

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

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

FirePHP

| カテゴリ:Firefox, PHP, Pear, ブラウザ | コメント(0) | トラックバック(0)

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

Gspace

| カテゴリ:Firefox, ブラウザ | コメント(0) | トラックバック(0)

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

FireShot

| カテゴリ:Firefox, ブラウザ | コメント(0) | トラックバック(0)

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

SeoQuake

| カテゴリ:Firefox, ブラウザ | コメント(0) | トラックバック(0)

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

TwitThis

今読んでいる記事をTwitterに投稿