常见兼容性问题

摘要

在WIN XP系统还占据着国内大部分市场时,很多公司为了获得这部分“古董级”用户,要求前端开发人员兼容那些让人头疼的IE6、7浏览器,也正因为这样,很多优雅的样式在这些浏览器上得不到很好的体现。不过令人兴奋的是,随着微软对IE系列的放弃,这种情况慢慢得到了好转。

在WIN XP系统还占据着国内大部分市场时,很多公司为了获得这部分“古董级”用户,要求前端开发人员兼容那些让人头疼的IE6、7浏览器,也正因为这样,很多优雅的样式在这些浏览器上得不到很好的体现。不过令人兴奋的是,随着微软对IE系列的放弃,这种情况慢慢得到了好转。

01、IE6下最小高度问题

解决办法:给当前元素加*overflow: hidden;

备注:在IE6下,元素的高度小于19px,会被当作19px处理

02、IE6下1px边框dotted问题

解决办法:用背景图

备注:IE6下dotted问题只发生在1px时

03、margin传递问题

解决办法:在IE下要解决margin传递问题,需要触发haslayout

备注:在IE6、7下,父级没有触发haslayout但有边框的时候,子元素的margin值会失效

04、IE6下的双边距问题

解决办法:给浮动元素加*display: inline;

备注:浮动元素本身是内联元素,在不加display: block;的前提下是不会出现双边距的。在IE6下,块元素有浮动并有横向的margin值,此时IE6下的margin值会被放大为两倍。若是margin-left,则是这行浮动元素左边第一个有;若是margin-right,则是这行浮动元素右边第一个有

05、IE6、7下li内元素有浮动,li本身没浮动,li下方会出现3px的问题

解决办法:给当前的li的加*float或加*vertical-align: top;

备注:当IE6下的最小高度问题与li下方3px空隙问题共存时,只能通过给li加*float和*overflow: hidden解决

06、IE6下最后一行元素margin-bottom失效问题

解决办法:目前尚无有效办法,只能尽量避免出现问题的前提条件

备注:在IE6下,当一行元素占有的宽度之和和父级的宽度相差不小于3px,或者有不满行的情况时,最后一行元素的margin-bottom会失效

07、IE6下的文字溢出问题

解决办法:用一个块元素将注释和内联元素包起来或让子元素的宽度和父级的宽度不小于3px

备注:在IE6下,子元素的宽度和父级的宽度小于3px,且两个浮动元素中间有注释或内联元素时会出现文字溢出问题

08、IE6下定位元素消失问题

解决办法:给绝对定位元素包层父级

备注:在IE6下,浮动元素和绝对定位元素处于并列关系时,绝对定位元素会消失

09、IE6、7下父级加了overflow仍包不住超出且带有position: relative;的子元素问题

解决办法:给父级加*position: relative;

10、IE6下绝对定位元素1px偏差问题

解决办法:目前尚无有效办法,只能尽量避免出现问题的前提条件

备注:在IE6下,绝对定位元素的父级宽、高为奇数的话,绝对定位元素的right和bottom都会有1px的偏差

11、IE6、7下输入类型的表单控件上下各有1px空隙的问题

解决办法:让该表单元素脱离文档流,如加*float

12、IE6、7下输入类型的表单控件加border: none;不生效问题

解决办法:border: 0 none;(最佳解决办法)或给该表单一个background-color(不推荐)

备注:让输入类型表单控件背景透明的简单方法background: none;

13、IE6、7下输入类型的表单控件输入文字时,背景图片会跟着移动问题

解决办法:表单控件元素外面包层div,将图片作为该div背景并给原表单控件加background: none;

14、IE6下!important失效问题

解决办法:避免引发条件

备注:在IE下,在!important后面加一条和带有!important相同的样式,!important失效,会按照默认优先级执行

15、IE6下不支持PNG24透明

解决办法:

  1. <!--[if IE 6]>
  2. <script src="http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a-min.js"></script>
  3. <script>
  4. DD_belatedPNG.fix('含有图片的元素');
  5. </script>
  6. <![endif]-->

css hack备注:

\9 IE6至IE10识别

\0 IE8及以上识别

_ 仅IE6及以下识别

* 仅IE7及以下识别

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: