起因：
做項目的時候做了一個表格內容超過DIV容器自動橫向滾動處理。別的瀏覽器都正常；但是在IE下面明明表格table和容器DIV寬度一致但是卻出現了滾動條。如圖
然后本人做實驗找了半天原因終於是找到了，是IE瀏覽器使用百分比計算寬度值不是整數值引起的。
實例1：使用百分比計算結果是整數的情況下顯示正常。
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>IE8奇葩滾動條問題實例</title> <style type="text/css"> * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .panel{ width:1000px; } .scroller{ overflow-x: auto; width:75%; background-color: #f00; } .inner{ width:750px; height: 10px; border: 1px solid #ddd; background-color: #ff0; } </style> </head> <body> <div class="panel"> <div class="scroller" style="height:35px;"> <div class="inner"></div> </div> </div> </body> </html>
.scroller的寬度=.panel的寬度*75%；結果為750，是一個整數，和.inner的寬度相同。顯示正常
實例2：使用百分比計算結果是非整數的情況下顯示異常。
.panel{ width:1001px; } .scroller{ overflow-x: auto; width:75%; background-color: #f00; } .inner{ width:751px; height: 10px; border: 1px solid #ddd; background-color: #ff0; }
設置.panel為1001px，那么.scroller的寬度=.panel的寬度*75%,結果為750.75px。但是實際上像素最小單位為1px，所以.scroller寬度為751px。而.inner也是751。按理說不應該出現橫向滾動條，但是IE卻出現了
難道IE對.scroller設置是750px?帶着這個疑問，將.inner設置成750px，然后將頁面放大看到.scroller和.inner的邊距差距明顯，所以.scroller顯示的寬度是751px沒有錯。見下圖
而且在IE8瀏覽器下測試的時候發現.scroller的高度也會影響滾動條是否顯示。當.scroller的高度是34-的時候效果圖如下
而當.scroller高度是35+的時候會顯示滾動條。
不得不吐槽IE瀏覽器的奇葩。
在IE9+上也會出現滾動條問題，不過有改進的是和.scroller的高度無關了。
所以我們估計IE瀏覽器在判斷滾動條顯示與否的時候是拿計算的浮動值取比較，而非拿真實顯示的值去比較的。
那么想象一下，對於IE瀏覽器來說現在.scroller的計算寬度為750.75px，如果我們給.inner也設置成一個浮點數呢？
測試結果是只要設置<751的任何浮點數都不會顯示滾動條。
所以，注意：在我們通過計算得到父容器的寬度來設置子標簽的寬度為等寬的時候，直接設置父容器的浮點值寬度即可。這是目前兼容各個瀏覽器的比較便捷的方法。
題外話：在瀏覽器窗口縮放（ctrl+鼠標滾輪）的時候，各個瀏覽器在父容器寬度是浮點數的時候都會出現滾動條，這個是縮放導致失真出現的問題，不可避免，也和該討無關。
2016/03/04
參考張鑫旭的這篇文章鮮為人知的一個解決兼容性問題的利器——小數
而我們上面的測試列子卻表明.scroller的寬度為小數時並沒有省略小數（可能在顯示文字的時候有省略），但是在計算內容超出滾動（overflow：auto）等的時候小數代入了計算（這個時候帶小數的寬度100.1px始終是大於100px的。當然對IE瀏覽器來說只要是帶了小數且個位數相等那么就會被認為相等，比如100.1px會被認為和100.9px相等）。
不過這篇文章我們獲悉了另一個信息，其他瀏覽器對小數都是四舍五入的。