ヘッダー下のナビゲーションバーを、アイコンと文字で構成した画像で置き換え、
苦労してカレントのページがわかりやすいようにしました。
その経緯は後でまとめて書くけど、問題は、今日何気なく会社のPCから、このサイトを見てみたときでした。
……ナビゲーションバーが表示されていません。
Windows版のFirefoxではちゃんと表示されるけど、Internet Explorer 6では、ヘッダーのすぐ下に、メインコンテンツ部分が来てしまっています。
やられました。
自宅では、Mac版のFirefoxとSafariで確認しているのですが、やっぱりMacでサイトを作るのは限界があるなあ……と痛感した瞬間でした。
調べてみて、IE6.0のCSSバグだとなんとなく確認、ホーリーハックと呼ばれる、IE6.0 の配置に関連する問題をほとんど何でも解決してくれると言われる、
/*Hides from IE5-mac ￥*/*html セレクタ{ height: 1% }/*End hide from IE5-mac */
というコードを挿入して、無事解決。
しかし、ここ２日くらいの間に来た多くの人は、あのナビを目にしていなかったのかと思うと、残念。
IE6.0での表示は他にも驚きの連続でした。
- サイドバーのテキスト部分のサイズ指定が反映されない。
「このサイトについて」以下の部分、
moboの日々の雑記や過去の絵を晒す場所。
今のところコンテンツの多くは、過去にmixiやYahoo!ブログに書いてきたものをまとめただけですが、今後少しづつ充実させていく予定です。
が、おかしな大きさになっています。英語の「mobo」、「mixi」、「Yahoo!」部分はちゃんと指定サイズが反映されているっぽいのですが、日本語は逆に大きくなっているような感じ…。
試行錯誤の末、現在、Text-size: 12ptとすることでとりあえずほどほどの見た目になっています。でも11ptにすると逆に文字が大きくなったりするので、正直わけがわかりません。
- テーブル指定の行間の「空き」が、表示されてしまう
WordPressでは、2行以上の連続した改行や、2文字以上の連続したスペースは、全て無視されます。なので、文章上、「間」を作りたい時に困るのですが、当座の対策として、テーブル指定の見えないボーダーを作っていました。
<hr style="border: 0pt none ; margin-top: 2em; margin-bottom: 2em" />ですが、IE6.0で見たら、このボーダー、表示されちゃっているじゃないですか！
がっかり……
テーブル指定は消しました。
- ヘッダーにある文字サイズ変更ボタンの色が変わらない
先日導入したボタン、気に入っているんですが、IE6.0だと、選択されたボタンの色が変わりません。
Internet Explorer 6、シェアを考えなければ、無視したい…
まあそれを言ったらほとんどのWinユーザーの方々はフォント指定などで、Macユーザーを無視したいんだろうな……
ここに挙げたような問題も、Webデザイナーさんは全て把握して、簡単に回避できるんだろう。
精進あるのみですね。