报告一个IE很奇葩的滚动条问题——百分比计算宽度为浮点数时的滚动条显示异常

时间：2015-12-09 18:52:23 阅读：144 评论：0 收藏：0 [点我收藏+]

标签：

起因：

　　做项目的时候做了一个表格内容超过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却出现了

　　技术分享