Safariで正しく表示されるようにしました

2008年3月21日(金) 03:04 | 日記

QuickTimeのアップデートをしたら、おまけでSafariがインストールされました。Windows版Safariの正規バージョンが出たんですね。
さっそく、Safariでこの日記を見てみました。フォントがスムージングされていて変な感じでした。日記の本文では文字間に1ピクセルのスペースが入る設定にしているのですが、Safariで見ると文字間が開きすぎているように見えます。Mac OS Xの標準フォントであるヒラギノで見ると、もっと見やすくなるのでしょうか。
それはそうと、Safariでは、日記の一部で表示が崩れていることに気づきました。
ページの右側にある「過去の日記」のところです。
全体的に右に寄ってしまい、左側に大きなスペースができてしまっています。

こちらが、該当部分のSafariでの表示です。
Safari
そして、こちらがFirefoxでの表示。Internet Explorer、Operaでも同じように表示されているはずです。ご覧のページと見比べてみてください。
Firefox
ここのほかにも、左側のトラックバックの表示においても同様に、Safariでは左側に余分なスペースができていました。
日記のデザインについては、普段僕が使っているFirefoxだけではなく、Internet ExplorerとOperaでも表示を確認していますが、MacのSafariでは確認していません。自宅には10年前のMacはあるのですが、OS Xではないので、Safariで確認のしようがありませんでした。Macの方には、ゆがんだ表示のままで日記を公開し続けていたことになります。ごめんなさい。

原因は、CSSの解釈の違いのようです。
Safariでは、liタグおよびddタグにmarginを指定しないと、左側にスペースを取ってしまうようです。
もともとのCSSではpaddingで左側のスペースを指定していて、marginは何も指定していませんでした。Firefoxなどのブラウザーではそれで問題ありませんでしたが、Safariではpaddingの分に加えて、デフォルトのmarginの分が加わったために、必要以上に大きなスペースができてしまいました。
この問題は、margin-leftを0に指定することで解決しました。現在はSafari以外のブラウザーと同様の表示になっているはずです。

CSSを書くときは、あらかじめすべての要素のmarginとpaddingを0にしておいてから、あらためて必要な要素のみ具体的に数値を指定すべきだと思いました。

コメントを投稿

※サーバーの状況によって、投稿完了まで時間がかかることがあります。
※投稿内容がすぐに反映されないことがありますが、ページを再読み込みするとコメントが表示されます。
※入力したURLは公開されますが、メールアドレスは公開されません(管理者に対してのみ通知されます)。