主要是在IE7以下的浏览器显示会出现问题。IE7以下浏览器显示的内容应该是和其他的浏览器显示的内容一样的，那么我们就得做一件事：fuck IE,浏览器兼容，通过写其他的一些代码进行一个IE7以下的浏览器的兼容，css hack;
IETester:IE各版本的测试软件
行内元素，块元素，行内块元素都是基于标准流
IE6,IE5,会出现的问题
1.双边距:
出现连续浮动，并且浮动方向和设置外边距的方向是一致的，那么第一个浮动的元素距离浮动方向的外边距则表现为双倍
处理方式：
将浮动的元素display:inline
2.最小高度问题
给标签元素设置边框线，不设置高度，在IE6里面显示出高度，该高度其实指的是字体的大小
处理方式：将font-size设置为0，将line-height也设置为0
3.子级撑开父级
元素子级元素比父级元素要大
处理方式：
给父级元素设置overflow:hidden
4.子元素不支持负边距
子级元素在IE6中设置负边距无效果
处理方式：
给子级元素设置position:relative
5.IE5不支持margin:0 auto;
解决方式:
设置定位为50%，再使用负边距，负边距的值为宽高的一半
6.行内元素与行内块元素共处一行，line-height属性是不起作用的。
处理方式：
给行内块元素设置margin-top:（父盒子的高度-子盒子的高度）/2
7.li元素间出现空隙
当li不浮动，子元素浮动的时候，会在每个li中间出现缝隙（3像素）
处理方式：
将li设置vertical-align:top
8. 3像素问题当有盒子浮动，另外一个盒子不浮动的时候，在IE6中是不会说覆盖标准流元素的，并且两个盒子中间还会出现3px的间隙
解决方式：
1.将两个盒子都设置为浮动
2.将浮动的盒子设置margin-right:-3px;
9.两个浮动元素之间，写注释出现多余字符
处理方式：
1.将注释干掉（一般不推荐使用）
2.在出现重复字符的盒子里面加上margin-right:-3px;
3.第二个解决方案是把父容器增加3px宽度
_属性名：属性值（_margin-right:30px）：盒子右边距离30px,如果有下划线，该属性只能被IE6支持
网友评论