IE瀏覽器盒子模型的滾動條問題

很多情況下我們會碰到這樣的情況，一個div，里面有一個table，這個table需要列很多很多的數據，有時候會超過容器的寬度，設計div寬高的時候，把一切都計算進去了，并且讓overflow-x的值為auto，以便讓列長總和超過容器寬度的時候，在瀏覽器中能出滾動。這樣設計以為沒問題了。可是取數據一瞧，不對，因為有了橫向滾動條，結果在IE瀏覽器里面連豎滾條都出現了，說明內容高度超過了容器高度。
先看圖

那么我們來看容器高度：
假如內容固定，表格也固定，那么你可能設置成固定高度，但是假如表格下還有內容，還正好取出來的數據不夠表格的最大行數據（比如每頁10行，結果一共才4行），那么會出現一大塊空白，所以可能更多的情況下你還是設置的是動態高度，其實就是100%啦。
既然是100%，那么為什么出現了豎滾條呢？首先，只有在IE下才出現這個滾動條，那么顯然，肯定又是盒子模型對高寬的理解不同了。
假如真實內容高度現在是500Px，因為橫滾條（假定有12px）的出現，W3C可能認為高度就是512px了，那么事情就解決了，容器是512，內容是512 。
可是IE顯然不這么計算，你現在內容高度是500px，那么我的100%算出來的就是500px，現在出現了橫滾條怎么辦？
1，它必須在容器里出現（本例中就是外圍的DIV）；
【IE瀏覽器盒子模型的滾動條問題】 2，只要一出現，必須會把實際內容追加成512px；
這樣就出現了上面的結果，計算的高度和實際高度不符，于是滾動條就出現了。這時候來解決問題：
開始認為，既然這是不應該出現的滾動條，那么就讓它不顯示不結了？于是給容器加style：overflow-y:hidden;
結果一運行，不對，512px的內容被你強制改成了500px還不讓滾動，必然有12px的內容無法顯示，因為滾動條的級別比較高，所以不能顯示的其實就是內容區的最后那12px ，顯然不能這么做
最后沒辦法，只有先判斷它是否IE ，（IE8引擎已經有所改變，那就判斷IE7吧），然后再插入一行（具體幾行根據瀏覽器實際情況定，上述數字都是假的，為了描述方便），在這個時候，再讓滾動條不出現，這樣問題就解決了，
在這種情況下，IE7事實上確實有部分內容無法顯示，但無法顯示的是你插入的無意義的空行。
插入的代碼你應該明白，是這種：

看效果：