起因：

　　做项目的时候做了一个表格内容超过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相等）。

　　不过这篇文章我们获悉了另一个信息，其他浏览器对小数都是四舍五入的。

　　如果觉得本文不错，请点击右下方【推荐】！

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

  1. Uc的个人中心很奇葩

    Uc的个人中心很奇葩,未登录前点击头像是图2选择性别,点击云同步才是图3登录,登录之后,想退出,要点击图1的头像进入图4编辑资料,然后右上角退出登录…摸索了好久,差点抓狂…把你们的产品经理叫出来一下… ...

  2. Qunar机票技术部就有一个全年很关键的一个指标：搜索缓存命中率，当时已经做到了>99.7%。再往后，每提高0.1%，优化难度成指数级增长了。哪怕是千分之一，也直接影响用户体验，影响每天上万张机票的销售额。 在高并发场景下，提供了保证线程安全的对象、方法。比如经典的ConcurrentHashMap，它比起HashMap，有更小粒度的锁，并发读写性能更好。线程安全的StringBuilder取代S

    Qunar机票技术部就有一个全年很关键的一个指标:搜索缓存命中率,当时已经做到了>99.7%.再往后,每提高0.1%,优化难度成指数级增长了.哪怕是千分之一,也直接影响用户体验,影响每天上万张机 ...

  3. 抓到 Netty 一个隐藏很深的内存泄露 Bug | 详解 Recycler 对象池的精妙设计与实现

    欢迎关注公众号:bin的技术小屋,如果大家在看文章的时候发现图片加载不了,可以到公众号查看原文 本系列Netty源码解析文章基于 4.1.56.Final版本 最近在 Review Netty 代码的 ...

  4. 一个区分度很大的iOS面试题

    @property 后面可以有哪些修饰符?@property中有哪些属性关键字? 属性可以拥有的特质分为四类: 原子性--- nonatomic 特质 在默认情况下,由编译器合成的方法会通过锁定机制确 ...

  5. css实现鼠标移入table时出现滚动条且table内容不移位

    一般是这样: 表格的标题和内容分别由一个table组成,其中表格内容的table由一个class="table-body"的div包裹.css如下 .tContainer .tab ...

  6. css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

    我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以 ...

  7. 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  8. 解决boostrap-table有水平和垂直滚动条时，滚动条滑到最右边表格标题和内容单元格无法对齐的问题

    问题:boostrap-table有水平和垂直滚动条时,滚动条不高的时候(滚动高度比较大的时候没有问题),滚动条滑到最右边表格标题和内容单元格无法对齐的问题 问题原因:bootstrap-table源 ...

  9. 如何用js控件div的滚动条，让它在内容更新时自动滚到底部？

    三种控制DIV内容滚动的方法: 方法一:使用锚标记要滚动到的位置,然后通过click方法模拟点击滚动到锚所在位置 <script language="javascript1.2&quo ...

随机推荐

  1. C++混合编程之idlcpp教程Python篇(5)

    上一篇在这  C++混合编程之idlcpp教程Python篇(4) 第一篇在这 C++混合编程之idlcpp教程(一) 与前面的工程相似,工程PythonTutorial3中,同样加入了三个文件:Py ...

  2. 一步一步跟我学DeviceOne开发 - 仿微信应用(一，二，三)

    这是一个系列的文档,长期目标是利用DeviceOne开发一些目前使用广泛的优质手机应用,我们会最大化的实现这些应用的每一个功能和细节,不只停留在简单的UI模仿和Demo阶段,而是一个基本可以使用的实际 ...

  3. Wix 安装部署教程(十一) ---QuickWix

    这次发布的是这两天做的一个WIX工具QuickWIX,主要解决两个问题点1.对大文件快速生成wix标签(files,Directories,ComponentRef):2.比较前后两次工程的差异.大的 ...

  4. Programming Entity Framework CodeFirst--数据库约定和配置

    这一章主要主要讲的是我们的模型如何映射到数据库,而不影响模型,以及不同的映射场景. 一.表名和列名 1.指定表名 [Table("PersonPhotos")] public cl ...

  5. 假如现在有一堆长度大于3小于9的电话号码，用座机呼叫，如果出现这样的号码【123和12345】那么12345将永远不会被拨出，因为拨到123的时候电话已经呼出了,试写一个函数输出所有不能被呼出的电话号码（java实现）

    解题: 假如现在有一堆长度大于3小于9的电话号码,用座机呼叫,如果出现这样的号码[123和12345]那么12345将永远不会被拨出,因为拨到123的时候电话已经呼出了,试写一个函数输出所有不能被呼出 ...

  6. 用 C 扩展 python

    本文介绍如何用 C 语言来扩展 python.所举的例子是,为 python 添加一个设置字符串到 windows 的剪切板(Clipboard)的功能.我在写以下代码的时候用到的环境是:window ...

  7. Linux 文件描述符和重定向

    200 ? "200px" : this.width)!important;} --> 介绍 文件描述符是与文件输入.输出相关联的整数,在编写脚本时会经常使用标准的文件描述符 ...

  8. Model模型和Module模块的区别

    资料是从网上找的,具体是谁最先写的,不清楚了. Model通常是指模型.这个模型也许是你需求分析出来的, 也许是你算法做出来的. 不过最大可能是MVC的网站,或者是GUI开发模式中的M里的那个模型. ...

  9. Bootstrap~多级导航（级联导航）的实现

    回到目录 在bootstrap官方来说,导航最多就是两级,两级以上是无法实现的,大叔找了一些第三方的资料,终于找到一个不错的插件,使用上和效果上都还不错,现在和大家分享一下 插件地址:http://v ...

  10. EF架构~关于多对多关系表无法更新与插入的问题

    回到目录 在EF里,我们设计模型时,会设计到多对多关系,在EF里会把这种关系会转成两个一对多的关系表,这是比较友好的,因为多对多来说,对于业务本身没什么意思,所以隐藏了,没什么坏处,但对于这个隐藏来说 ...