スタイルシートの技

「Internet Explorer」と「Netscape Navigator」でのtable要素の挙動の違いの対処法

掲示板にて質問があった一件です(投稿者:獏さん)。例えば,table の親要素(div や body など)が font-size : 90% ; と指定していたら,その子要素のフォントサイズも指定がなければ 90% になりますよね. ところが IE の場合,なぜか table 要素に限って 100% になってしまいます。 table 要素のフォントサイズを 90% に指定してしまうと,IE では良いのですが, NN ではフォントサイズが 90% × 90% になってしまい更に小さくなってしまいます。。 この解決方法について多少複雑ですが対処法を掲載する事にしました。獏さんの文面を引用しております。

<script type="text/javascript">
   an = navigator.appName ;
   if ( an == "Microsoft Internet Explorer" ) {
      document.write ( '<link rel="stylesheet"' +
         ' href="browser.css" type="text/css">' ) ;
   }
</script>

と記述し、browser.css を外部CSS として作成すれば、Internet Explorer のみに適用される CSS ができます。 今回の場合,この外部CSS に td , th { font-size : 90% ; } と書けば解決です. ファイル名と変数(an),ブラウザ名は必要に応じて変えれば大丈夫です。 もちろん,外部 CSS にせず,直接記述しても大丈夫だと思います。

注意点としては、Opera の場合デフォルトで「MSIE ○○として認識させる」になっているので、このままではダブってフォントサイズが設定されてしまいます。 認識の設定を「MSIE ○○として認識させる」以外にすれば解決します。このスクリプトを使う際には、Opera ユーザに対してその事を明記した方が良いでしょう。