Firefox だと沖縄県警サイトが悲惨になる件について

Firefox で沖縄県警のサイトを見てみましょう。たぶん悲惨なことになっていると思います。縮小キャプチャを以下にあげておきます。

▲左：Firefox3 右：IE7　(沖縄県警のサイトTOPのキャプチャ（部分・縮小）)
IE など他のブラウザだとキレイに見えるのに、なぜ Fx では悲惨なことになるのでしょうか？

原因の推測

スタイルシートの指定の仕方が原因かと思います。ソースを見てみます。

<link rel="stylesheet" href="css/import.css" type="text/css" media="print" />
<link rel="stylesheet" href="css/import.css" type="text/css" media="screen" />

このように同じファイル（import.css）を2度指定しています。指定されている import.css を見てみましょう。大変短いので全文引用します。

@charset "utf-8";

@import url(reset.css);
@import url(base.css);

import.css 本体ではスタイルの指定はせず、詳細が記述されている reset.css と base.css を呼び出しているだけとわかります。そしてこの @import が今回の惨事の原因です。
Firefox においては、同じ CSS ファイルを 2 回指定したとき、 1 回目は import されますが、 2 回目は import されないようです。

ですから実は

沖縄県警のサイト、崩れて見えていましたが、実は印刷すればきれいに見えます。1回目の import.css の呼び出しは、印刷用スタイルシートとしての指定だからです。CSS 指定部分のコードを再掲しておきます。

<link rel="stylesheet" href="css/import.css" type="text/css" media="print" />
<link rel="stylesheet" href="css/import.css" type="text/css" media="screen" />

一度目の media="print" での import.css の読み込みでは、実質のスタイル指定が記述されている reset.css も base.css も import されます。なので、印刷して閲覧するか、そこまでしなくても印刷プレビューで閲覧すれば整った状態で見えます。
しかし、import.css の2度目の読み込みとなる media="screen" では import されません。なので import.css は実質

@charset "utf-8";

となり、スタイルを何も指定していないことと同じになってしまいます。ですから、悲惨な見栄えになってしまうのです。

解決策1

CSS の指定を次のようにまとめる。

<link rel="stylesheet" href="css/import.css" type="text/css"
      media="print,screen" />

一度に指定してしまえばどうということはありません。

解決策2

import.css と全く同じ中身で import_print.css と import_screen.css を作成する。

<link rel="stylesheet" href="css/import_print.css" type="text/css"
      media="print" />
<link rel="stylesheet" href="css/import_screen.css" type="text/css"
      media="screen" />

中身は全く同じでも、指定するファイルさえ異なればどうということはありません。

それで・・・

専門家じゃないので、同じファイルを 2 度指定することが悪いのかどうかわかりません。サーバにやさしくなさそうなのはわかりますが。
なので、問題が起こる Firefox の実装が悪いのか、サイト作成者がアレなのかわかりません。
こういう時ってどうするのがいいのかわからないので、はてダで晒してみることにしました。

追記

「2度目だとスタイルシートの指定が無効」と書かずに、import されるとかされないとかいう書き方をした件について、多少補足。
今回のような 2 重指定の場合、本当に import だけが期待通りに動かない。たとえば、今回 2 回指定されている import.css の中身が

@charset "utf-8";

@import url(reset.css);
@import url(base.css);
body{
    text-align: center;
}

のような場合、

body{
    text-align: center;
}

の部分は 1 度目(今回の例で言えば print)、 2 度目 (screen) の指定どちらでも有効。@import 〜の部分だけが、2度目だと無視されているようだ、ということです。
なので、「2度目のスタイルシート指定は無効」とは書けず、「import はされない」と書いた次第です。