html - IE10 でフォントが太すぎる

Question

CSS「font-weight:bold」を使用して太字にしたHTMLテーブルヘッダーがいくつかあります。これは、IE8 モードの Chrome、Firefox、および IE10 では問題ないように見えますが、IE10 モードで IE10 のページにアクセスすると、テキストが太すぎます。

これを修正する方法は？

*{
    font-family:        Arial, Helvetica, sans-serif;
    font-size:          12px;
}
.widetableheader{
    font-weight:bold;
}

score 5 · Accepted Answer

特にIE10をターゲットにするには、条件付きコメントを削除したため、javascriptを使用する必要があります。(これを指摘してくれたステレオスコットに感謝します) jquery を使用してこれを行う簡単な方法を次に示します。

if ($.browser.msie && $.browser.version == 10) {
  $("html").addClass("ie10");
}

IE9 以下の場合は、条件付きコメントを使用することをお勧めします。

これを行うには、最初に IE10 固有のスタイルシートをセットアップします。IE はコードを壊して見栄えを悪くするのに最適なブラウザーであるため、おそらく IE で奇妙に見える他のものに遭遇するでしょう。

<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="ie10.css">
<![endif]-->

IE 10 にのみ適用されるため、そのスタイルシート内で font-weight を指定するだけです。

.widetableheader{
  font-weight:500;
}

IEでうまくいくまで、font-weightでその数値を操作します。

ご不明な点がございましたら、お気軽にお問い合わせください:)

score 2 · Accepted Answer

以下を使用して修正しました。

*{
    font-family:        Arial, Helvetica, sans-serif;
    font-size:          12px;
    font-weight:        normal;
}

そのため、CSS シートの「ルート」に font-weight を追加します。可能性をありがとう！

score 0 · Accepted Answer

たぶん、数値を試してみてください。

参考文献：

score 0 · Accepted Answer

これは実際には「正しい」解決策ではありませんが、jquery を使用すると、新しいスタイルのセットを設定できます。

if ($.browser.msie && $.browser.version == 10.0) {
    $("html").addClass("ie10");
}

CSS で:

.ie10 .widetableheader{
    font-weight:500;
}

もっと洗練された解決策があるかもしれません。

4 に答える 4