高手處理IE中盒子模型滾動條有妙招

       其實不要看我們平時使用IE瀏覽器都是簡簡單單的，打開瀏覽器，輸入所需網址，就完事了�？墒钱斆鎸Γ�稍微比較深奧的問題時，大家就搔頭抓耳了。就比如關于瀏覽器盒子模型的滾動條的問題。下面，小編就此問題進行詳細的講述。

　　先看圖：

瀏覽器盒子模型的滾動條

　　那么我們來看容器高度：

　　假如內容固定，表格也固定，那么你可能設置成固定高度，但是假如表格下還有內容，還正好取出來的數據不夠表格的最大行數據（比如每頁10行，結果一共才4行），那么會出現一大塊空白，所以可能更多的情況下你還是設置的是動態高度，其實就是100%啦。

　　既然是100%，那么為什么出現了豎滾條呢？首先，只有在IE下才出現這個滾動條，那么顯然，肯定又是盒子模型對高寬的理解不同了。

　　假如真實內容高度現在是500Px，因為橫滾條（假定有12px）的出現，W3C可能認為高度就是512px了，那么事情就解決了，容器是512，內容是512。

　　可是IE顯然不這么計算，你現在內容高度是500px，那么我的100%算出來的就是500px，現在出現了橫滾條怎么辦？

　　1，它必須在容器里出現（本例中就是外圍的DIV）；

　　2，只要一出現，必須會把實際內容追加成512px；

　　這樣就出現了上面的結果，計算的高度和實際高度不符，于是滾動條就出現了。這時候來解決問題：

　　開始認為，既然這是不應該出現的滾動條，那么就讓它不顯示不結了？于是給容器加style：overflow-y:hidden;

　　結果一運行，不對，512px的內容被你強制改成了500px還不讓滾動，必然有12px的內容無法顯示，因為滾動條的級別比較高，所以不能顯示的其實就是內容區的最后那12px，顯然不能這么做

　　最后沒辦法，只有先判斷它是否IE，（IE8引擎已經有所改變，那就判斷IE7吧），然后再插入一行（具體幾行根據瀏覽器實際情況定，上述數字都是假的，為了描述方便），在這個時候，再讓滾動條不出現，這樣問題就解決了，

　　在這種情況下，IE7事實上確實有部分內容無法顯示，但無法顯示的是你插入的無意義的空行。

　　插入的代碼你應該明白，是這種：

　　《！–［if IE 7］》

　　《p》 《/p》

　　《�。踖ndif］–》

　　看效果：

瀏覽器盒子模型的滾動條

　　好了，相信很多的朋友是看不懂的。只要是涉及到代碼的問題，很多人就開始頭暈了。大家不用擔心，這種事情，還是讓iE高手來解決。要是真的有興趣，就認真學習一下吧！