粗上加粗的IE10字體寬到超出原本的容器

最近發現有個菜單在 IE 下面顯示得非常怪異，字體寬到超出原本的容器，仔細看了下 css 代碼，字體設置得也不算大?。罄捶⑾職鴨喲質糶勻サ艟駝Ａ?。深入一步研究發現原來又是 IE 特立獨行了。

代碼如下：

復制代碼代碼如下:
p Normal font 1 /p
pb Bold font 2 /b/p
p style="font-weight: bold;"bBolder font 3/b/p

在其他 geko 瀏覽器和IE8以下中顯示是這樣的：

唯獨IE 10 及以上是這樣的：

請注意 font 3 比 font 2 粗了很多。

作祟的是： font-weight: bold; 和 b 標簽同時使用時，IE 10 的處理是加粗兩次，而其他瀏覽器（包括較早版本的IE）則只加粗一次。這個從語義上理解也無可厚非，因為的確是加粗了兩次，但是從實用角度及容錯角度來看，加粗渲染一次足以，相信很少有需要加這么粗的。

當然啦，這種 font-weight: bold; 和 b 標簽同時使用的寫法是應該避免的。