139-6504-8393

CSS常见兼容性问题及解决办法

录入编辑:明图网络 | 发布时间:2021年09月24日

合肥网站建设小编认为不同版本浏览器对css的解析是有些分别的,特别是IE6,和IE7.虽然现在使用老版本的人数不多,但是还是有部分人在使用,我们并不能完全忽略这群用户。那么如何才能解决CSS当中存在的兼容性问题呢?下面我们就跟着小编一起来了解一下吧!

CSS常见兼容性问题及解决办法

问题一:在IE6元素浮动,如果宽度需要内容撑开,就给里边的块元素都加浮动(不然会出不在同一行)

问题二:在IE6,7下元素要通过浮动并在同一行,就给这行元素都加浮动;

问题三:注意标签嵌套规范(<p><h3></h3></p>给p标签加背景颜色会出现两块bug)

问题四:在IE6下元素的高度的小于19px的时候,会被当做19px来处理(解决办法:overflow:hidden;)

问题五:1px dotted 在IE6下不支持(解决办法:切背景平铺)

问题六:在IE6下父级有边框的时候,子元素的margin值消失(解决办法:触发父级的haslayout)

问题七:IE6下双边距BUG,在IE6,块元素有浮动和和横向的margin值 ,横向的margin值会被放大成两倍(解决办法: display:inline;)margin-right 一行右侧第一个元素有双边距;margin-left 一行左侧第一个元素有双边距

问题八:  在IE6,7下,li本身没浮动,但是li的内容有浮动,li下边就会产生一个间隙(解决办法:1.给li加浮动2.给li加vertical-align)

当IE6下最小高度问题,和 li的间隙问题共存的时候 给li加浮动

问题九: 当一行子元素占有的宽度之和和父级的宽度相差超过3px,或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效(暂时无解决办法)

问题十: 在IE6下的文字溢出BUG,产生条件:子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素(解决办法:用div把注释或者内嵌元素用div包起来 (父级调大))

问题十一:当浮动元素和绝对定位元素是并列关系的时候,在IE6下绝对定位元素会消失(解决办法:给定位元素外面包个div)

问题十二:在IE6,7下,子元素有相对定位的话,父级的overflow包不住子元素(解决办法: 给父级也加相对定位)

问题十三:在IE6下绝对定位元素的父级宽高是奇数的时候,元素的right值和bottom值会有1px的偏差(没有解决方法)

问题十四:在IE6下position:fixed;无法实现功能(使用js方法代替)

问题十五:在IE6,7下输入类型的表单控件上下各有1px的间隙(解决办法:给input加浮动)

问题十六:在IE6,7下输入类型的表单控件加border:none;(解决办法: 重置input的背景,或者设置border:0;)

问题十七:在IE6,7下输入类型的表单控件输入文字的时候,背景图片会跟着一块移动(解决办法: 把背景加给父级)

上面就是对不同问题的解决办法,当我们对不同浏览器设置不同的风格:

CSS常见兼容性问题及解决办法

这样 在IE11下会显示“ 这是IE11”其他IE下只会显示这是IE
或者使用 css hack:

\9 IE10之前的IE浏览器解析
+,* IE7包括IE7之前的IE浏览器解析
_IE6包括IE6之前的IE浏览器

CSS常见兼容性问题及解决办法


上一篇:2021年中秋节放假通知
下一篇:2021年国庆节放假通知
热门服务和内容
  • 明图微信公众号

    微信公众号

  • 合肥小程序制作

    客服微信号

  • 业务咨询 139-6504-8393

    (7*14小时)8:30-22:30 贴心服务

    合肥市蜀山区长江西路669号拓基城市广场B座11层

    在线咨询
    关于明图 | COPYRIGHT © 2008-2020 合肥明图网络科技有限公司 ALL RIGHTS RESERVED 备案编号: 皖ICP备14002487号-3