くろねこ研究所

今までホームページの確認はIE6でのみ、行ってました。
しかし、アクセスログのブラウザを見ていると少なからず Firefox があったので、インストールして確認してみました。
すると、ぐちゃぐちゃレイアウトの裏に文字が隠れてたりするんです。丸１日かかって原因がわかりました。今までくろねこは外部スタイルシートの設定を、各ページで以下のように書いていました。

xxxxx.htm
<link rel="stylesheet" href="/css/~layout.css" type="text/css"
title="レイアウト" media="screen,print" />
<link rel="stylesheet" href="/css/~styles.css" type="text/css"
title="スタイル" media="screen,print" />

~layout.css
@import "layout.css"

~style.css
@import "style.css"

でもこれだと２つめのスタイルシートが Firefox の場合に正しく取り込めていないようなのです。
でも、以下のように書き直すことでだいたい表示できるようになりました。

xxxxx.htm
<link rel="stylesheet" href="/css/@import.css" type="text/css"
title="スタイルシート" media="screen,print" />

@import.css
@import url(layout.css)
@import url(style.css)

firefox では、linkタグ一回でスタイルシートを取り込まないといけないようですね。
まだ、書き直せていないページも多いので順次書き換えていきます。