CSS 変更(Safari 対応)

CSS 変更(Safari 対応)

Posted at June 16,2007 1:11 AM
Tag:[CSS, Safari]

Windows 版 Safari のベータ版がリリースされたのは皆さんご存知と思います。私も早速ダウンロードしまして、以前から気になっていた表示の崩れを修正しました。

1.Safari の日本語化

本エントリーと関係ありませんが、Windows 版 Safari ベータ版の日本語化手順の参考サイトを挙げておきます(ベータ版は日本語に対応してません)。

私は2つめの方法を利用し、

C:¥Documents and Settings¥ユーザ名(Administratorとか)¥Application Data¥Apple Computer¥Safari¥WebKitPreferences.plist

<key>WebKitSansSerifFont</key>
<string>Arial</string>

<key>WebKitSansSerifFont</key>
<string>MS UI Gothic</string>

に変更しただけでうまくいきました。他の1台は何をやっても文字化けして×でした。

2.CSS 変更点

CSS の変更点はヘッダとサイドメニューの表示崩れ、それから検索フォームのテキストエリア幅修正です。
下は Windows 版 Safari で閲覧した、修正前の当サイトのスクリーンショットです。

修正前

問題が集中している右上の部分のみクローズアップしています。ヘッダは背景画像とナビゲーションが分離し、サイドバーのメニュータイトルは高さが十分に確保できておらず、期待通りの立体感のある表示になっていません。

ヘッダとサイドメニューは画像と、上下にボーダーを組み合わせたデザインにしており、以前、iCapture で確認したところ、Safari のみ表示が崩れていました。Windows も自マシン以外の特定のブラウザの特定のバージョンでしか確認していないので「全部大丈夫」とは言えませんが…。

修正前はクロスブラウザ対応のために、コンテンツの高さを padding と CSS ハックでこねくり回していましたが、これをすっぱり諦めて height と line-height を用いてみました。サイドバーも padding の調節から height と line-height に変更しました。

この変更で、IE6 でサイドバーのアンカーのブロックレベル要素指定が無効になる事象(文字にマウスをポイントしないと反応しない)が発生し、かなり慌てましたが、親要素に height: auto; を与えることで解消しました。

ということで、以下が修正後のスクリーンショットです。

修正後

表示と動作は Wiindows XP + IE6/IE7/Firefox2/Opera9/Safari3 で確認しています。
なおブラウザのズーム機能を使うと修正前のヘッダと同じような症状になりますのであしからず。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

Windows で Safari ? from kappadow.jp
小粋空間様もためしておられましたが、Windows版 Safari Beta をインストールしてみました。 ... [続きを読む]

Tracked on June 16, 2007 10:41 AM
コメント

あぁ、そうですよね!!
WinでもSafariの動作確認がしてもらえるようになったってことですよね。

それはMacユーザーとしてはありがたいことですね。
ただ・・・どれくらいのWinユーザがそれをしてくれるのか・・・気になるところです。(^^;)

[1] Posted by ゆう : June 17, 2007 7:33 AM

>ゆうさん
こんばんは。
確かにそうですね。
私はそろそろMacを購入しようかと思案していたところでしたので大助かりです。

[2] Posted by yujiro : June 18, 2007 12:07 AM

エントリーの「トラックバック」「トラックバックURL」「コメント」「コメントする」などの下に空白があるようにに見えるんですけど…。
サイドメニューとの高さが違うのかな?
細かい所ですが。

[3] Posted by どら : June 18, 2007 9:11 AM

>どらさん
こんにちは。
ご指摘ありがとうございます。
ここの修正は気がついてませんでした。

[4] Posted by yujiro : June 18, 2007 4:28 PM

この修正をした為だと思いますけど、
IE6だけ右サイドメニューが下へ行っちゃってます。
FireFoxやIE7では大丈夫です。
でも、こういう修正はいつも面倒ですよね・・・。

[5] Posted by どら : June 19, 2007 11:22 AM

>どらさん
こんにちは。
度々のご指摘ありがとうございます。
が、何台かPCを変えて確認してみたのですが、IE6ご指摘の事象を再現することができませんでした…。

[6] Posted by yujiro : June 23, 2007 12:07 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)