browser

safariで微妙に太く表示されるフォントを、他のブラウザに合わせる。

どうも-webkit-font-smoothing:というプロパティがあるようで
safariはデフォルトでsubpixel-antialiased;があたっているようです(windowsは)。

でもってその値にantialiased;を指定すると
他のブラウザと同じような細さになるようなならないような。

確認用スクリーンショット

[image]-webkit-font-smoothing適用スクリーンショット

確認用ページ

※safariで見ないと意味ないよ。
-webkit-font-smoothingでsafariの文字の太さを他のブラウザと合わせる。

プロパティと値

noneを指定したら、それ以降が激しく文字化けしたので
確認用ページから外した。

参考にしたサイト /

Maxvoltar – -webkit-font-smoothing

日本語版tumblrとtombloo

いつからかそうなのか定かじゃないけど
tomblooの挙動がおかしくなって
テキストをreblogできなくなったり、
photoをreblogした時にreblog先の情報が消えてしまったりしてました。

こんな感じで
[image]tumblr

どうも原因はtumblrのダッシュボードが日本語化されて

XPath に title 属性を使っていて、それが日本語になったため

らしいです。

こちらで修正パッチが配布されてました。
Tumblr日本語ダッシュボード用Tomblooパッチ | 圧縮電子精神音楽浮遊構造体

はーこれはたすかる

うちの環境では直接右クリックからインストール出来ず
ダウンロードして
C:\Users\[ユーザー名]\AppData\Roaming\Mozilla\Firefox\Profiles\[プロファイル名]\tombloo\script
にぶっこんで
メニューの 「ツール」→「Tombloo」→「Tomblooのリロード」でインストールしました。

[image]パッチインストール後

それでは素敵なtumblr lifeを。

li内のaをdisplay:blockした時IE6でmargin-bottomぽいところが広がる

liの中のaタグにdisplay:blockを指定して
クリック出来る部分を広げた時
IE6で下marginが広がってしまった。

みた感じaタグのmargin-bottomが拡張されている風だけど
marginを0にしても消えない。

どうもこれは、hasLayoutがtrueじゃないから起こるみたいで
普段はaタグにwidthを指定してるから発生してなかった。
(widthに値が入ってればhasLayoutがtrueになる)

今回は_zoom:1を追加して対処。

他にhasLayoutをtrueにするには
hasLayout Property (A, ABBR, ACRONYM, …)

CSS property Value
display

inline-block
height

any value
float

left or right

position absolute
width any value
-ms-writing-mode tb-rl

zoom any value

ブラウザの表示倍率を無理やり100%に見せる(ただしIE限定、動作確認は8のみ)

サンプル / http://sakurachiro.com/_exercise/html_css/zoom1/index.html
(IEで表示倍率を変更すると確認出来ます)

ブラウザの表示倍率をリセットする方法は無いかな?と試行錯誤してみました。

ちょっと調べてみるとscreen.devicexdpiってのを使うと画面のdpiがわかるみたい

参考にさせてもらったページ
javascript screen deviceXDPI, deviceYDPI, logicalXDPI, logicalYDPI
deviceXDPI Property (screen, Screen Constructor)
これでできる! クロスブラウザJavaScript入門:第19回 CSSOM View Module解説

windowsは96でIEの表示を400%にしてる時は384。

そこに直接数字を入れたらコントロールできるかのか?と
screen.devicexdpi=96;みたいにしても反応なし。
読み取るだけなのか、使い方を間違ってるのかとにかくこの方法じゃ出来なかった。

なのでzoomプロパティを使って拡大してる分を縮小させてみる事に。
こんな感じ

zoomを1になるようにしても
横幅が拡大した時のサイズにあわせて変更されちゃうので
document.body.clientWidthを倍率に合わせて拡張

スクロールバーが表示されるのでbodyにoverflow-x:hidden;を指定して切捨て。
window.onloadとwindow.onresizeで呼び出してみたけど
書き方が悪いのかwindow.onresizeがあると横幅が異常に広がってしまうので削除した。

なんとなくokぽい感じがしないでもないけど
上下marginがあると拡大したままになってしまうのよね、これ。

縦のスクロールも伸びっぱなしでした。
ん~もうちょっと頑張らないと使い物にならないかなぁ。

IE6 CSS Fixer

ie6fixer – onderhond.com
普通のcssからIE6用のcssを吐き出してくれるサービス、現在バージョン0.95。

例えば

IE6だと左右のmarginが40pxになってしまう以下の記述

これをie6 css fixerで変換させると
(select your master stylesheetのpaste your complete master stylesheetを選択してgive me my ie6 fixesをクリック)

なんてcssを吐き出してくれる。

これを保存してコンディショナルコメントでie6だけ読み込むようにすれば対策完了。

でもって、最初からdisplay:inline;が付けてる場合は、新たにdisplay:inline;を吐き出さないのかな?と試してみたけどdisplay:inline;を吐き出してた。

というか、

を変換すると

を吐き出してた。
むむむ?

dtとddを横並びさせた時、IE6でddが3pxズレる時はzoom:1;

タイトルが全てだけど

dtとddを横並びさせた時、IE6でddが3pxズレる時はzoom:1;を付けるとズレなくなりました。

zoomの前の_はIE6用のハック
/にするとIE7以下に効く。

Firefoxで開いているページをIETesterで開く

Firefoxがクラッシュしたので、新しくアドオンを入れ直してる最中に見つけた開いてるページを別のブラウザで開くアドオン。

[image]Open With 4.1.0

現在開いているページを、Internet Explorer、Chrome、Safari、Opera など、他のブラウザで簡単に開けるようなメニュー項目を追加します。

IETesterなど別のブラウザも簡単に追加出来る。
[image]開くブラウザ
でも残念な事に引数を渡せないのでバージョン指定出来ない。
しかしお手軽。

バージョン指定して開けるようにするには

Launchy :: Add-ons for Firefoxを使うといいみたい。

参考 / Firefoxで今見ているページを右クリックからIETesterで開く方法 – lucky bag

lucky bagさんが用意してくれているlaunchy.xmlを
Launchyの設定 – launchy.xmlタブの中に書いてあるフォルダにぶっこんで再起動するだけ。

しかしアドオン入れ直すの面倒だなぁ。
個人的にFirefoxは大好きだけど、これはアドオンがあって初めて使えるブラウザなわけで、使えるブラウザに仕上げるのが何気に面倒、やり過ぎると重くて使えないし。