這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)如何解決粗上加粗的IE10字體寬到超出原本的容器，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

東豐網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站設(shè)計(jì)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)公司2013年開創(chuàng)至今到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

最近發(fā)現(xiàn)有個菜單在 IE 下面顯示得非常怪異，字體寬到超出原本的容器，仔細(xì)看了下 css 代碼，字體設(shè)置得也不算大啊，后來發(fā)現(xiàn)把加粗屬性去掉就正常了。深入一步研究發(fā)現(xiàn)原來又是 IE 特立獨(dú)行了。

代碼如下：

代碼如下:

Normal font 1

Bold font 2

Bolder font 3

在其他 geko 瀏覽器和IE8以下中顯示是這樣的：
 
唯獨(dú)IE 10 及以上是這樣的：
 
請注意 font 3 比 font 2 粗了很多。

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

當(dāng)然啦，這種 font-weight: bold; 和 標(biāo)簽同時使用的寫法是應(yīng)該避免的。

上述就是小編為大家分享的如何解決粗上加粗的IE10字體寬到超出原本的容器了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。