最近一直在做響應(yīng)式的項(xiàng)目度硝,font-size 的單位選用了 rem。
rem 是根據(jù) html font-size 來(lái)計(jì)算的。
但是去到了 IE11 的時(shí)候失效了盗舰。IE10,9 均沒(méi)有問(wèn)題桂躏,目前還沒(méi)有找到相關(guān)的資料钻趋。(當(dāng)然 Chrome, Firefox, Safari 也是沒(méi)有問(wèn)題的。)
另外打開(kāi) console 調(diào)試一次或選中元素點(diǎn)擊一下以后便正常了剂习。要想再看到 bug蛮位,需要清緩存,為避免有強(qiáng)力緩存鳞绕,退出IE重新打開(kāi)失仁,再查看。
為了解決這個(gè)問(wèn)題们何,在 body 添加了相關(guān)的 css 樣式:
body {
font-size:100%
}
詳細(xì)代碼請(qǐng)戳:http://codepen.io/leechingyin/pen/YqmVVW
由于上述代碼還帶有 resize 函數(shù)萄焦,假如 body 元素沒(méi)有添加 font-size:100% 時(shí)。當(dāng)窗口發(fā)生變化時(shí)總記錄上一次的的 font-size 大小垂蜗。當(dāng)調(diào)試時(shí)楷扬,就變得正常了解幽。同樣需要清除緩存,退出瀏覽器才能繼續(xù)查看 bug烘苹。
添加 body 樣式后正常躲株,估計(jì)是在 IE11 下獲取不了動(dòng)態(tài)修改過(guò)的 html 的內(nèi)聯(lián)樣式,body 一直默認(rèn)瀏覽器 font-size:14px镣衡。所以字體變得很小霜定。將 body{font-size:100%} 繼承父元素大小,就可以了廊鸥。
辣么問(wèn)題來(lái)了~rem不是根據(jù)html font-size計(jì)算嗎望浩?為什么還要設(shè)置body呢?這問(wèn)題有待解決惰说。
ps:字體大小單位rem創(chuàng)建了一個(gè)追大小磨德,該字體大小是相當(dāng)于在HTML或body元素中的已經(jīng)聲明的基本字體大小而言的,如果未聲明基本字體大小吆视,則是相對(duì)于內(nèi)建字體大小的典挑。