Topお知らせblogサイト変更履歴 > 2007年6月
2007年6月16日

CSS 変更(Safari 対応)

June 16,2007 1:11 AM
Tag:[, ]
Permalink

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 で確認しています。
なおブラウザのズーム機能を使うと修正前のヘッダと同じような症状になりますのであしからず。

Comments [6] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3