IE與chrome（以及其他瀏覽器）寬度兼容性問(wèn)題

前文

最近接到一個(gè)task，一個(gè)table表格在chrome上沒(méi)有X軸的滾動(dòng)條，但是在IE上就有了滾動(dòng)條。
也是查了很久才想到解決辦法，所以記錄一下。

正文

先上解決方案：

.class{
  box-sizing: border-box;
}

這個(gè)問(wèn)題的根本原因是在IE 與別的瀏覽器在計(jì)算寬度的時(shí)候方法不同。

  • chrome計(jì)算寬度 單純的就是定義的width的長(zhǎng)度。
  • IE瀏覽器計(jì)算寬度則是用 width + padding + border。

有關(guān)于box-sizing的資料：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容