发现IE 9的一个独有的小bug,并附解决方案
在最近的项目中,解决了一些浏览器兼容方面的bug,这篇主要描述在IE 9在渲染值为auto的overflow-x属性时,所产生的专属bug及解决办法。
1、问题描述
在做一个收货地址管理静态页面的时候,需要在众多地址中标示当前鼠标移动了那一个地址上面,所以我给地址的行加上了:hover伪类,然后,我在IE 9下发现了一个有趣的现象(见附件first.html)。
为什么我设置的max-height属性没有能够起作用?这种情况是怎么产生的,又该怎么解决呢?
2、问题分析
该问题是一个IE 9独有的bug,地址为http://www.jackness.org/?p=615#more-615的文章中对该bug出现的前置条件作了如下陈述:
bug 触发条件:
经测试发现,这个bug的出现有2个条件:
1)父级设置overflow:auto(准确来说应该是overflow-x:auto),并且里面的元素宽度超出父级导致横向滚动条出现;
2) 父级元素的任意子元素设有:hover伪类并且里面有属性设置(与原有的属性不一样即可);
满足这2个条件,当你触发父级里面的:hover 伪类的时候,bug就会出现。
对比我的页面样式和文档结构,发现完全符合这两个条件。
<SPAN>.address .address-list .ls{
max-height:130px;
margin-top: 10px;
border: 1px solid rgb(226,226,226);
overflow: auto;
background-color: rgb(255, 255, 255);
}
.address .ls .address-element{
margin-top: 6px;
float: left;
white-space: nowrap;
}
.address .ls .address-element:hover{
background-color:yellow;
}</SPAN>
<SPAN><div class="ls" id="addressList">
<div class="address-element">
代昊鑫上海市上海市徐汇区北四环中关四桥太平洋大厦503 100000 13598660548
</div>
…………
</div></SPAN>
那么这两个条件是否完全归纳了呢?有没有其他的可能情况呢?为此我在此文件的基础之上,进行了如下测试:
1) 测试目的:overflow-x的值不为auto时,该bug是否会出现;
条件:保持其他条件不变,重新设置overflow-x的值为hidden/scroll;
结果:所有浏览器上正常,IE9 没有出现上述问题
示例(见附件):测试1-hidden.html 测试2-scroll.html
2) 测试目的:父元素不产生横向滚动条时,该bug是否会出现;
条件:保持其他条件不变,修改数据内容,使父元素不产生横向滚动条;
结果:所有浏览器上正常,IE 9 没有出现上述问题
示例(见附件):测试3-删除文字.html。
3) 测试目的:通过父元素触发JS事件动态修改子元素样式,,该bug是否会出现;
条件:保持其他条件不变,删除:hover伪类,通过id为addressList的父元素的 hover/mouseover事件修改子元素 的样式;
结果:所有浏览器上正常,IE 9 没有出现上述问题
示例(见附件):测试4-父元素的hover事件改变子元素的样式.html
测试5-父元素的mouseover事件改变子元素的样式.html。
4) 测试目的:通过子元素触发JS事件动态修改自身样式,,该bug是否会出现;
条件:保持其他条件不变,删除:hover伪类,通过子元素的hover/mouseover事件修改自身的样式;
结果:所有浏览器上正常,IE 9 没有出现上述问题
示例(见附件):测试10-子元素的mouseover事件改变自身的样式.html
测试11-子元素的hover事件改变自身的样式.html。
5) 测试目的:通过父元素触发JS事件动态修改子元素的class值,,该bug是否会出现;
条件:保持其他条件不变,删除:hover伪类,通过id为addressList的父元素的hover/mouseover事件修改子元素的 class值;
结果:其它浏览器上正常,IE 9复现上述问题
示例(见附件):测试6-父元素的hover事件增加子元素的class.html
测试6-2-父元素的hover事件删除子元素的class.html
测试7-父元素的mouseover事件增加子元素的class.html
测试7-2-父元素的mouseover事件删除子元素的class.html。
6)测试目的:通过子元素触发JS事件动态修改自身得class值,该bug是否会出现;
条件:保持其他条件不变,删除:hover伪类,通过子元素的hover/mouseover事件修改自身的class值;
结果:其它浏览器上正常,IE 9复现上述问题
示例(见附件):测试12-子元素的hover事件为自己增加class.html
测试13-子元素的mouseover事件为自己增加class.html
测试14-子元素的hover事件删除自身的class.html
测试15-子元素的mouseover事件删除自身的class.html。
7) 测试目的:通过外部元素的JS事件来动态改变子元素样式,该bug是否会出现;
条件:保持其他条件不变,删除:hover伪类,创建一个button按钮,通过该按钮的click事件,修改id为addressList的元 素的子元素样式;
结果:所有浏览器上正常,IE 9 没有出现上述问题
示例(见附件):测试8-click事件改变子元素的样式.html。
8)测试目的:通过外部元素的JS事件来动态改变子元素class值,该bug是否会出现;
条件:保持其他条件不变,删除:hover伪类,创建一个button按钮,通过该按钮的click事件,修改id为 addressList的元 素的子元素的class值;
结果:其它浏览器上正常,IE 9复现上述问题
示例(见附件):测试9-click事件增加子元素的class.html
测试9-2-click事件删除子元素的class.html。
通过上述测试可以看出,修改子元素style值是无法触发IE 9这个bug的,只有修改(无论是通过父元素、自身还是外部操作)子元素的class属性的值才能触发该bug
由此得出该bug出现的两个前置条件为:
1)父级设置overflow:auto(准确来说应该是overflow-x:auto),并且里面的元素宽度超出父级导致横向滚动条出现,并且父级元素不设置height属性的值。
2)子元素设有:hover伪类或者通过动态修改(增加或者删除)子元素的class属性值;
满足这2个条件,并且触发子元素的:hover伪类或者执行了修改子元素class属性值得代码时,bug就会出现。
3、解决方案
通过以上分析我们知道了触发条件,根据触发条件得到如下解决方案:
1) 给父级别的overflow-x设置非auto值;
2) 保证这个父级里面的元素内容不超出父级的宽度;
3) 保证子元素没有:hover伪类或者保证不动态修改子元素的class属性值;
但是以上解决方案都可能对我们的功能造成影响,既然造成的结果都是父元素的高度被改变,那么我们就可以设置父元素的height属性来解决问题。
1) 通过对父元素的height属性直接设置高度值【见附件:解决方案1.html】;
.address .address-list .ls{
max-height:130px;
height:130px;
margin-top: 10px;
border: 1px solid rgb(226,226,226);
overflow: auto;
background-color: rgb(255, 255, 255);
}
2) 在父元素外层设置添加一个空的元素,设置父元素height占外层元素高度的100%,【见附件:解决方案2.html】;
.address .address-list .ls{
max-height:130px;
height:100%;
margin-top: 10px;
border: 1px solid rgb(226,226,226);
overflow: auto;
background-color: rgb(255, 255, 255);
}
4、总结
在进行web开发中会遇到很多关于浏览器兼容的问题,通过一些测试来了解问题产生的原因和前置条件,在后续的开发中可以避免出现重复的错误。
在工作中多注意总结和积累解决问题办法,才能不断的提高自己。
发现IE 9的一个独有的小bug,并附解决方案的更多相关文章
- (原创)WinForm中莫名其妙的小BUG——ComboBox 尺寸高度问题
一.前言 使用WinForm很久了,多多少少遇到一些小BUG. 这些小BUG影响并不严重,而且只要稍微设置一下就能正常使用,所以微软也一直没有修复这些小BUG. 本来并不足以写篇文章去记录,但是昨天遇 ...
- 关于一个小bug的修正
python初学者,非常喜欢虫师的文章. 练习时发现一个小bug,http://www.cnblogs.com/fnng/p/3782515.html 验证邮箱格式一题中,第三个x不允许有数字,但是测 ...
- 使用PyQt4制作一个正则表达式测试小工具
最近在做一些网络爬虫的时候,会经常用到正则表达式.为了写出正确的正则表达式,我经常在这个网站上进行测试:Regex Tester.这个页面上面一个输入框输入正则表达式,下面一个输入框输入测试数据,上面 ...
- 跟我一起做一个vue的小项目(二)
这个vue项目是紧跟着之前的项目跟我一起做一个vue的小项目(一)来的. 我继续后面的开发(写的比较粗糙,边学边记录) 下图是header头部的样式 header组件内容如下 //header.vue ...
- 从一个小Bug,到Azure DevOps
1. 一个小Bug 最近和同事提起一个几年前的 Bug,那是一个很小很小的 Bug,没什么技术含量.那时候我刚入职,正好公司卖了一款仪器到某个国家,但是那边说配套的软件运行不起来,一打开就报错.经过排 ...
- 第一个Mac shell 小脚本
大多数程序员都喜欢偷懒的,我也不例外.相信好多Android开发的coder 在网络http请求方面,会浪费很多时间在接口调试这里..有时候,自己写了一个小测试,行还好,不行的话,还要跟写后台的哥们一 ...
- 一个python爬虫小程序
起因 深夜忽然想下载一点电子书来扩充一下kindle,就想起来python学得太浅,什么“装饰器”啊.“多线程”啊都没有学到. 想到廖雪峰大神的python教程很经典.很著名.就想找找有木有pdf版的 ...
- 用原生javascript做的一个打地鼠的小游戏
学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码: ...
- 今天来做一个PHP电影小爬虫。
今天来做一个PHP电影小爬虫.我们来利用simple_html_dom的采集数据实例,这是一个PHP的库,上手很容易.simple_html_dom 可以很好的帮助我们利用php解析html文档.通过 ...
随机推荐
- css border 制作三角形
border 边框 上三角 是只有上面的border 有颜色,其余的边框都是tranparents,下三角只有下面的border 有颜色,其余的边框都是tranparents,左三角只有左面的bord ...
- https 的理解
前言: 本篇博文来记录下对http及https的理解.(会有点 杂,补缺补漏) 引用:https://blog.csdn.net/u011109589/article/details/80306479 ...
- [转帖]Intel为何吊打AMD,先进半导体工艺带来什么?
Intel为何吊打AMD,先进半导体工艺带来什么? 2016-3-10 15:38 | 作者:Strike | 关键字:超能课堂,半导体工艺,CPU制程 分享到 按照摩尔定律的发 ...
- Python高级特性:Python迭代、生成器、列表生成式
迭代 给定一个list或tuple,我们可以通过for循环来遍历这个list或tuple,这种遍历称为迭代(Iteration). 在java和C语言中,迭代是通过循环list的下标来完成的,Pyth ...
- elasticsearch6 学习之数据分片
ES: ElasticSearch(简称ES):是一个基于Lucene构建的开源.分布式.RESTful的全文本搜索引擎:它还是一个分布式实时文档存储,其中每个field均是被索引的数据且可被搜索:也 ...
- input select & input unselect
input select & input unselect input select https://developer.mozilla.org/en-US/docs/Web/API/HTML ...
- Linux_MySql_yum_安装
1.卸载原始mysql-lib sudo rpm -e --nodeps mysql-libs-xx 2.yum安装mysql-server sudo yum -y install mysql -se ...
- ORA-01034和ORA-27101的解决方法
问题所在: 1.要登录的数据库实例内容配置内容错误,联系负责该机子的管理员看原因
- 如何在低速率网络中测试 Web 应用
大家看到标题后的第一个问题可能是:“我们需要这样做吗?” 如果我们开发的是局域网 Web 应用的话,可能没有必要这样做.但如果我们的 Web 应用面向的是互联网上的成千上万的用户,这样做就很必要了.因 ...
- 解题:CQOI 2017 老C的方块
题面 看起来很像网络流的二分图套路题,然后我们大力观察(题目定义的相邻我用引号括起来,应该能看懂) 发现“相邻”的一对方格如果各自连着一个一个方格就gg了,于是对于所有这些“相邻”的方格,我们有两种选 ...