测试管理之修正IE6的Bug的10个技巧
白羽 2018-05-17 来源 :网络 阅读 705 评论 0

摘要:本文将带你了解测试管理中修正IE6的Bug的10个技巧, 我们知道,IE6可能过不了多久就会消失了,但是我们还能继续支持这个浏览器并且避免hack和有约束的CSS吗?这里是10个使用有效的HTML和CSS代码来修正IE6主要问题的方法。


    我们知道,IE6可能过不了多久就会消失了,但是我们还能继续支持这个浏览器并且避免hack和有约束的CSS吗?这里是10个使用有效的HTML和CSS代码来修正IE6主要问题的方法。


  1. 使用DOCTYPE

  你应该在一直每个HTML文件的头部都使用DOCTYPE,并且我们推荐使用strict 版本,比如:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd">

  或者,对于XHTML使用:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  你需要处理的最棘手的事情就是IE6进入quirks模式——它已经够诡异了。


  2. 设置position: relative

  将一个元素设置为”position:relative”可以解决很多问题,特别是你曾经遇到隐藏的或对齐诡异的盒子。显然,你需要非常小心点儿,因为绝对定位的子节点可能会因此重新定位。


  3. 将浮动元素设置为display:inline

  具有margin属性的浮动元素可能引起著名的IE6双倍margin问题,比如,你为一个元素指定margin-left为5px,但是IE6中实际上却表现为10px。”display:inline”将解决这个问题,尽管这不是必须的,你的CSS仍然是有效的。


  4. 将一个元素设置为hasLayout

  很多IE6(和IE7)的渲染问题可以通过设置元素的hasLayout来解决。 这是一个IE内部属性(IE隐藏的,更多关于haslayout的资料,可以参阅这里),用来确定相对于其他元素,内容是如何布局和定位的。如果你需要设置一个inline元素(比如一个链接)为block元素,或者是应用透明效果,设置hasLayout也可能是必须的。


  最简单的设置hasLayout的方法是为CSS设置一个高度或宽度(zoom也可以用,但是zoom并不是CSS标准的一部分)。我们推荐设置实际尺寸,但是问题是这是不现实的,你可能需要使用”height:1%”。如果父元素并没有设置高度,该元素的实际高度并不受影响,而且这个时候hasLayout已经被启用。


  5. 修正重复文字bug

  复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法,有些是完美的,但是做一些反复试验也是必须的:

  

确保所有的元素使用”display:inline;”
  在最后一个元素上使用一个”margin-right:-3px;”

  为浮动元素的最后一个条目使用一个条件注释,比如:

  

<!--[if !IE]>Put your commentary in here...<![endif]-->

  在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)

  访问 positioniseverything.net 查看该问题的完整介绍。


  6. 在可点击和悬停的元素上只使用<a>标签

  IE6只认识对a标签的CSS hover效果。

  你也可以在基于JavaScript的组件内使用他们来控制,以使他们保持键盘的可操作性。是有一些可替代的选择,但是<a>标签比其它方案更可靠。


  7. 使用!important 或高级选择器来区分IE6

  不使用传统Hack或在额外文件中的条件CSS的方法,写出特别针对IE6的可行的代码也还是有可能的。比如最小高度可以通过这段代码来定义:

  

#element {
  min-height: 20em;
  height: auto !important; /* 所有浏览器都理解这段代码 */
  height: 20em; /* IE6 错误的使用这个值 /*
  }

  IE6 不理解min-height并错误的用20em覆盖”auto”高度,但是,如果内容需要更多的空间的话,它会自动增加高度。

  另外一个可选的方法是使用高级选择器,比如e.g.

  

#element {
  min-height: 20em;
  height: 20em;
  }
  /* IE6 无视下面的代码*/
  #element[id] {
  height: auto;
  }

  8. 避免百分比单位

  百分比会把IE搞糊涂的。除非你可以确切的控制每一个父元素的大小,才可能做到最佳预防。你可以通过!important在其他浏览器中继续使用百分比,比如:

  body {
  margin: 2% 0 !important;
  margin: 20px 0; /* IE6 only */
  }


  9. 尽早测试并不断测试

  不要等到你的网站或应用完成了才测试IE6;这样的话问题可能更糟糕,而且会花更多时间来修正。如果你的网站能够在Firefox和IE6中正常运行,那么一般在其它浏览器就不会有问题。


  10. 重构你的代码


  经常发生的事情是,修正bug要比重新考虑一个布局问题要花更长的时间。对HTML做些小改动和一些简单的CSS常常更有效。这可能意味着你要放弃完美的代码,但是会出现较少的长期问题而且将来你会很清楚如果处理这些可能出现的问题。

  神飞感言,虽然IE8并没有从根本上改变IE,但是它对CSS标准的支持的确有非常大的改观。但是即便如此,我们依然不能寄希望与IE8的普及,这是一件很不靠谱的事情,顽固的IE6用户未必会接受IE8。所以我们最近一年半载还是不能无视IE6。

 

     本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标软件测试之测试管理频道!


本文由 @白羽 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程