IE瀏覽器盒子模型的滾動(dòng)條問(wèn)題
很多情況下我們會(huì)碰到這樣的情況，一個(gè)div，里面有一個(gè)table，這個(gè)table需要列很多很多的數(shù)據(jù)，有時(shí)候會(huì)超過(guò)容器的寬度，設(shè)計(jì)div寬高的時(shí)候 ， 把一切都計(jì)算進(jìn)去了，并且讓overflow-x的值為auto，以便讓列長(zhǎng)總和超過(guò)容器寬度的時(shí)候，在瀏覽器中能出滾動(dòng) 。這樣設(shè)計(jì)以為沒(méi)問(wèn)題了 。可是取數(shù)據(jù)一瞧，不對(duì)，因?yàn)橛辛藱M向滾動(dòng)條，結(jié)果在IE瀏覽器里面連豎滾條都出現(xiàn)了，說(shuō)明內(nèi)容高度超過(guò)了容器高度 。
先看圖
驗(yàn)啦網(wǎng).net/經(jīng)驗(yàn)啦網(wǎng)/1/45-202007171643285f1164b030694.jpg)
那么我們來(lái)看容器高度：
假如內(nèi)容固定，表格也固定，那么你可能設(shè)置成固定高度，但是假如表格下還有內(nèi)容，還正好取出來(lái)的數(shù)據(jù)不夠表格的最大行數(shù)據(jù)（比如每頁(yè)10行，結(jié)果一共才4行），那么會(huì)出現(xiàn)一大塊空白，所以可能更多的情況下你還是設(shè)置的是動(dòng)態(tài)高度，其實(shí)就是100%啦 。
既然是100%，那么為什么出現(xiàn)了豎滾條呢？首先，只有在IE下才出現(xiàn)這個(gè)滾動(dòng)條，那么顯然，肯定又是盒子模型對(duì)高寬的理解不同了 。
假如真實(shí)內(nèi)容高度現(xiàn)在是500Px，因?yàn)闄M滾條（假定有12px）的出現(xiàn)，W3C可能認(rèn)為高度就是512px了，那么事情就解決了，容器是512，內(nèi)容是512 。
可是IE顯然不這么計(jì)算，你現(xiàn)在內(nèi)容高度是500px，那么我的100%算出來(lái)的就是500px，現(xiàn)在出現(xiàn)了橫滾條怎么辦？
1，它必須在容器里出現(xiàn)（本例中就是外圍的DIV）；
【IE瀏覽器盒子模型的滾動(dòng)條問(wèn)題】 2，只要一出現(xiàn)，必須會(huì)把實(shí)際內(nèi)容追加成512px；
這樣就出現(xiàn)了上面的結(jié)果，計(jì)算的高度和實(shí)際高度不符，于是滾動(dòng)條就出現(xiàn)了 。這時(shí)候來(lái)解決問(wèn)題：
開(kāi)始認(rèn)為，既然這是不應(yīng)該出現(xiàn)的滾動(dòng)條，那么就讓它不顯示不結(jié)了？于是給容器加style：overflow-y:hidden;
結(jié)果一運(yùn)行，不對(duì)，512px的內(nèi)容被你強(qiáng)制改成了500px還不讓滾動(dòng)，必然有12px的內(nèi)容無(wú)法顯示，因?yàn)闈L動(dòng)條的級(jí)別比較高，所以不能顯示的其實(shí)就是內(nèi)容區(qū)的最后那12px ， 顯然不能這么做
最后沒(méi)辦法，只有先判斷它是否IE ， （IE8引擎已經(jīng)有所改變，那就判斷IE7吧），然后再插入一行（具體幾行根據(jù)瀏覽器實(shí)際情況定，上述數(shù)字都是假的，為了描述方便） ， 在這個(gè)時(shí)候，再讓滾動(dòng)條不出現(xiàn)，這樣問(wèn)題就解決了 ，
在這種情況下，IE7事實(shí)上確實(shí)有部分內(nèi)容無(wú)法顯示，但無(wú)法顯示的是你插入的無(wú)意義的空行 。
插入的代碼你應(yīng)該明白，是這種：
看效果：
驗(yàn)啦網(wǎng).net/經(jīng)驗(yàn)啦網(wǎng)/1/45-202007171643285f1164b0373c2.jpg)
正是我們要的，不是么 。
