起因：

　　做项目的时候做了一个表格内容超过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. .NET 的 WebSocket 开发包比较

    编者按 本文出现在第三方产品评论部分中.在这一部分的文章只提供给会员,不允许工具供应商用来以任何方式和形式来促销或宣传产品.请会员报告任何垃圾信息或广告. Web项目常常需要将数据尽可能快地推送给客户 ...

  2. .NET Mvc Razor也可以这样玩！

    忙碌的工作总是占据了生活的大部分的时间!所以我的博客到现在还是寥寥的几篇文章,技术是用来分享和学习的,对技术有不同的见解,大家都可以分享下,如果如下文章有问题之处请各位指出来,在这个闲下来的时间给大家 ...

  3. 初中级Javascript程序员必修学习目录

    很多人总感觉javascript无法入门,笔者在这里写一下自己的学习过程,以及个人认为的最佳看书过程,只要各位能按照本人所说步骤走下去,不用很长时间,坚持个3个月,你的js层级会提高一个档次,无他,唯 ...

  4. Hadoop笔记

    教程: Elasticsearch.MongoDB和Hadoop比较:  http://blog.csdn.net/hong0220/article/details/47631409

  5. STC12C5A60S2笔记5（省电模式）

    1. 基本特性 STC12C5A60S2系列单片机可运行三种省电模式以降低功能,STC正常工作电流是2mA~7mA,而掉电模式下<0.1uA,空闲模式下<0.1mA. 1) 空闲模式:由电 ...

  6. Java设计模式2：简单工厂模式

    简单工厂模式 简单工厂模式是类的创建模式,又叫做静态工厂方法模式.简单工厂模式由一个工厂对象决定生产出哪一种产品类的实例. 为什么要使用简单工厂模式 原因很简单:解耦. A对象如果要调用B对象,最简单 ...

  7. dojo事件驱动编程之事件绑定

    什么是事件驱动? 事件驱动编程是以事件为第一驱动的编程模型,模块被动等待通知(notification),行为取决于外来的突发事件,是事件驱动的,符合事件驱动式编程(Event-Driven Prog ...

  8. Javascript图片裁切

    最近浏览了不少网站的图片裁切效果,大部分的做法如下图所示(借用一张脚本之家的图片),通过改变裁切框的大小来选取合适的位置. 但本文介绍的是另外一种裁切方式,裁切框由开发者决定,图片大小由用户决定,通过 ...

  9. 【面试必备】javascript操作DOM元素

    前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...

  10. C#Light 小幅升级，支持快速绑定匿名函数、Lambda表达式

    二话不说直接上图 new RegHelper_Function(delegate,funcname);即可 因为匿名函数没有名字,制定一个函数名就可以从脚本调用了. 原来的绑定实名函数方法也小幅调整为 ...