起因：

　　做项目的时候做了一个表格内容超过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. Excel使用技巧总结

    Excel博大精深,此文用来记录Excel的使用技巧 1.多个单元格值添加单引号,比如:A1单元格的值为123444,添加单引号之后变为'123444',可以在B1或者其他任一空的单元格内输入公式:& ...

  2. angularjs http 请求拦截器

    /** * Created by oy on 2016/11/29. */ (function() { 'use strict'; // 创建angular模块 angular .module('ap ...

  3. array new 与 array deletedelete

    以前在看C++书和上C++课的时候可以看到 delete[] pointer; 的用法,而大多数对于这个用法没有具体的解释,多是看到: 有一个delete运算符的特殊语法,可以释放动态分配的数组内存: ...

  4. Intellij笔记

    环境 官网: http://www.jetbrains.com/idea/download/ 需要Java的JDK,需要安装 JDK,而不是 JRE! http://www.oracle.com/te ...

  5. mongodb（副本集）

    副本集是mongo下的一种集群配置方式: 1.通过oplog的方式将主节点数据同步到副本节点,oplog不记录查询语句(因为不改变数据): 2.mongo的副本集可以有一个主节点,多个副本节点,主节点 ...

  6. 在UWP应用中加入Cortana语音指令集

    本文介绍小娜语音指令集的使用场景,如何将UWP应用接入小娜的语音指令集,使用户直接通过小娜启动应用并使用应用中 一些轻量级的功能.文中以必应词典作为实例讲解必应词典UWP版本是如何接入小娜语音功能的. ...

  7. 团队项目——站立会议DAY13

    第十三次站立会议记录: 参会人员:张靖颜,钟灵毓秀,何玥,赵莹,王梓萱 项目进展: 1.张靖颜:在完成各项功能的基础上继续进行扩展完善 2.钟灵毓秀:进行模块分类的整合与纠错修改,整理错误向队友提出 ...

  8. 优雅的使用python之环境管理

    优雅的使用python之环境管理 缘起 情景1:不同python版本的管理 同一电脑上的多个python版本之前的管理,为了突出问题的普遍存在,下面是有人在segmentfault上提的问题. 摘自: ...

  9. java中基本类型和包装类型实践经验

    至今,小菜用java快两年了,有些事,也该有个总结. 基本类型和包装类型的概念在本文不作赘述. 如果这两种类型直接使用,倒没什么值得讨论的,无非就是自动装箱拆箱,java可以让你感觉不到他们的存在,但 ...

  10. Windows Live Writer 初次使用

    Windows  Live Writer 博客园文章的一款发布器,这篇文章就是通过其发布的,可以先在word中写好博客内容,直接粘贴到这里发布就OK,之前我都是先在Word中写好一份,然后在blogs ...