CSS浏览器兼容性

IE6/IE5以下会出现的问题

1.双边距问题:当连续浮动,且浮动方向和设置外边距的方向一致时,第一个浮动元素距离浮动方向的外边距则表现为双倍

  处理方式:将浮动的元素设置为display:inline

2.最小高度问题:给标签元素设置边框线,不设高度,在IE6里会显示出高度,该高度其实就是字体的大小

  处理方式:font-size:0,line-height:0

3.子级撑开父级元素:子级比父级大

  处理方式:给父级设置overflow:hidden

4.子元素不支持负边距:子级在IE6中设置负边距无效

处理方式:在子元素里设置position:relative

5.IE不支持margin:0 auto;(IE5不支持)

  处理方式:设置定位50%,再使用负边距,值为宽度一半

6.行内元素与行内块元素共处一行:line-height属性不起作用

 处理方式:给行内块元素设置margin-top,值为(父盒子高-子盒子高)/2

7.列元素间会出现缝隙:当li不浮动,子元素浮动的时候,会在每个li中间出现缝隙(3像素)

 处理方式:vertical-align:top

8.3像素问题:一个盒子浮动,另一个盒子不浮动,在IE6中是不会覆盖标准流元素的,但是两个盒子中有3px间隙

处理方式:将两个盒子都浮动 或 将浮动的盒子设置margin-right:-3px;

9.两个浮动元素之间写注释时时会出现多余字符,IE6

处理方式:1.去掉注释,一般不推荐;2.在出现重复字符的盒子里面加上margin-right:-3px,只加到IE6中,即_margin-right:-3px(如果有下划线,该属性只能被IE6支持:_属性名:属性值);3.给父盒子增加3px的宽度

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 5,909评论 0 6
  • Ø JavaScript 3 1. HTML对象获取问题 32. const问题 33. event.x与even...
    横冲直撞666阅读 8,379评论 0 7
  • Ø JavaScript 3 HTML对象获取问题 3 const问题 3 event.x与event.y问题 3...
    DavieKong阅读 3,335评论 0 1
  • display: none; 与 visibility: hidden; 的区别 联系:它们都能让元素不可见 区别...
    纹小艾阅读 5,754评论 0 1