IE浮动边界BUG延伸探讨

熟悉CSS盒模型朋友相信对于IE双倍浮动边界BUG不会陌生（如果你并不是很清楚可以点击），这个BUG只会产生在浮动行的第一个浮动元素，所以如果第一个浮动元素没有使用外补丁margin就不会有双倍距离。不过最近发现IE对于这个BUG居然有延伸的现象。

问题
下例所有图的浮动行的第一个浮动元素外补丁margin都为0

#left2的margin-left为50px显示正常

当#left2的margin-left为100px显示正常

接着我们将#left2的margin-left增大到150px，开始有点奇怪了吧

我们把#left1的width改为110px，而#left2的margin-left继续保持150px

看到上面的现象，我们发现IE还真有性格啊，到底这个性格男是怎么样算的啊？其实仔细观察不难发现，当#left2的margin-left小于等于#left的宽度时显示正常，可是一旦大于后就出现问题，它实际#left2的左边界距离等于#left1.width+(#left2.margin-left - #left1.width)*2
解决
要解决这个BUG其实很简单，跟双倍距离解决的方法一样，将#left2设置{display:inline}就OK。
总结
关键是刚才我为什么说它是BUG的延伸呢，因为无论是双倍BUG还是这个错误算法的BUG都只会出现一次。也许你还没明白，那这样说：

1.如果#left1的margin-left大于0的话，那么#left1左边界就产生了双倍距离的BUG，而后面的#left2的margin-left即便大于#left1的宽度也不会出错了；

2.如果left1的margin-left等于0，#left2的margin-left大与#left1的宽度，那么#left2左边界出现错误算法的BUG，之后还有个#left3，即便是#left3的margin-left大与#left2的宽度也不会出错；

3.如果left1和left2的margin-left都等于0，之后还有个#left3，而#left3的margin-left大于（#left1和#left2的宽度之和），那么#left3左边界就出现错误算法BUG，它的实际左边界为(#left1.width+left2.width)+(#left3.margin-left-#left1.width-left2.width)*2，然后#left3后面的所有浮动元素都不会出错；

上面都是以左边为例，右边情况一样

赞 (0)

相关推荐

  • IE浮动边界BUG延伸探讨

    IE浮动边界BUG延伸探讨

    熟悉CSS盒模型朋友相信对于IE双倍浮动边界BUG不会陌生(如果你并不是很清楚可以点击),这个BUG只会产生在浮动行的第一个浮动元素,所以如果第一个浮动元素没有使用外补丁margin就不会有双倍距离.不过最近发现IE对于这个BUG居然有延伸的现象. 问题下例所有图的浮动行的第一个浮动元素外补丁margin都为0 #left2的margin-left为50px显示正常 当#left2的margin-left为100px显示正常 接着我们将#left2的margin-left增大到150px,开始有

  • 如何理解软件系统的高并发

    概述 当前,数字化在给企业带来业务创新,推动企业高速发展的同时,也给企业的IT软件系统带来了严峻的挑战.面对流量高峰,不同的企业是如何通过技术手段解决高并发难题的呢? 引言 软件系统有三个追求:高性能.高并发.高可用,俗称三高.三者既有区别也有联系,门门道道很多,全面讨论需要三天三夜,本篇讨论高并发. 高并发(High Concurrency).并发是操作系统领域的一个概念,指的是一段时间内多任务流交替执行的现象,后来这个概念被泛化,高并发用来指大流量.高请求的业务情景,比如春运抢票,电商双十一

  • 分析JS中this引发的bug

    分析JS中this引发的bug

    在 js 中,this 这个上下文总是变化莫测,很多时候出现bug 总是一头雾水,其实,只要分清楚不同的情况下如何执行就可以了,以下就是我们给大家整理的相关内容: 在JavaScript中有一个很特别.很常用又常常让初学者很困扰的东西 ─ "this",在这堂课中会来谈谈这个"this". this通常会指向一个对象,同时this会在不同的情境下指向不同的对象.让我们来看几个不同的情境,帮助我们更了解"this". window object (

  • 一个因@click.stop引发的bug的解决

    问题 在项目页面中使用 element popover,设置trigger='click'时点击外部不会触发自动隐藏,但在 element 官网中是可以正常触发的(官方示例),项目中的菜单是自定义写的,所以怀疑是有黑魔法. 查找原因 将 popover 写在app.vue根组件内,发现可以正常触发自动隐藏. 在app.vue的 mounted 钩子中加入window.addEventListener('click', () => console.log('window click===>>

  • MySQL对window函数执行sum函数可能出现的一个Bug

    使用MySql的窗口函数统计数据时,发现一个小的问题,与大家一起探讨下. 环境配置: mysql-installer-community-8.0.20.0 问题点:在sum对window函数执行时,如果有重复数据,会直接把相同的数据相加,并不是逐步相加. 问题描述 数据:在一个成绩表中,有三个个字段:学生s_id,课程c_id,成绩s_score. 查询条件查询每个课程的学生成绩排名和成绩汇总. 查询结果:发现如果同一个课程有相同成绩是,汇总成绩不是累加的,而是一次全部加上去. 创建数据表 CR

  • js解析与序列化json数据(二)序列化探讨

    上一节我们讲解了JSON.stringify()的基本用法,这一节我们来重点探讨一下序列化. JSON.stringify()除了要序列化的js对象外,还可以接收另外两个参数,这两个参数用于指定不同方式序列化js对象.第一个参数是过滤器,可以使一个数组,也可以是一个函数:第二个参数是一个选项,表示是否在JSON字符串中保留缩进.单独或组合使用这两个参数,可以更全面深入地控制JSON的序列化. 1.过滤结果 如果过滤器参数是数组,那么JSON.stringify()的结果中将只包含数组中列出的属性

  • AngularJS深入探讨scope，继承结构，事件系统和生命周期

    本文实例讲述了AngularJS的scope,继承结构,事件系统和生命周期.分享给大家供大家参考,具体如下: 深入探讨 Scope 作用域 每一个 $scope 都是类 Scope 的一个实例.类 Scope 拥有可以控制 scope 生命周期的方法,提供事件传播的能力,并支持模板渲染. 作用域的层次结构 让我们再来看看这个简单的 HelloCtrl 的例子: var HelloCtrl = function($scope){ $scope.name = 'World'; } HelloCtrl

  • ASP.NET Web Page应用深入探讨第1/2页

    一.服务器脚本基础介绍 首先,我们先复习一下Web服务器页面的基本执行方式: 1.客户端通过在浏览器的地址栏敲入地址来发送请求到服务器端 2.服务器接收到请求之后,发给相应的服务器端页面(也就是脚本)来执行,脚本产生客户端的响应,发送回客户端 3.客户端浏览器接收到服务器传回的响应,对Html进行解析,将图形化的网页呈现在用户面前 对于服务器和客户端的交互,通常通过下面几种主要方式: 1.Form:这是最主要的方式,标准化的控件来获取用户的输入,Form的提交将数据发送给服务器端处理 2.Que

  • 一个伴随ASP.NET从1.0到4.0的OutputCache Bug介绍

    一个伴随ASP.NET从1.0到4.0的OutputCache Bug介绍

    我们先来一睹这个Bug的风采! 在一个.aspx文件中增加OutputCache设置,代码如下: 复制代码 代码如下: <%@ OutputCache Duration="300" VaryByParam="*"%> 上面的设置表示:缓存5分钟,根据不同的查询字符串更新缓存.Location使用的是默认值Any,也就是可以在浏览器.代理服务器.Web服务器三个地方进行缓存,在Response Headers中的体现就是Cache-Control:publ

  • 利用ASP.NET MVC+Bootstrap搭建个人博客之修复UEditor编辑时Bug(四)

    利用ASP.NET MVC+Bootstrap搭建个人博客之修复UEditor编辑时Bug(四)

    我的个人博客站在使用百度富文本编辑器UEditor修改文章时,遇到了一些问题,(不知是bug,还是我没有配置好).但总算找到了解决方法,在此记录下来. 小站首页文章列表显示为(显示去除HTML标签后的前600个字符): 具体在www.zynblog.com 遇到的问题: 正常来讲,进入文章修改页,只需将UEditor对应的textarea的value设置为文章Content就行了: $('#editor').val('@Html.Raw(this.Model.Contents)'); 最开始我就

随机推荐