有关IE6兼容问题与解决

何为兼容问题
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

问题一：浏览器的标签默认

标签在不加样式控制的情况下，各自的margin 和padding差异较大

• 解决方法：
• 在CSS中加上*
• *{margin = 0；padding = 0；}
• 这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外边距是0。

问题二：IE6的内外边距问题

块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

• 解决方法：
• 在float的标签样式控制中加入 display:inline;将其转化为行内属性

问题三：li标签间隙问题

IE6中，如果li标签中的内容设置了高度，li标签之间会有间隙；

• 解决办法：
• 给li设置vertical-align：top；

问题四：IE6标签问题

IE6浏览器中hover只支持a标签的使用，不支持一切其它标签使用

• 解决办法
• 合理用a标签嵌套其他行内标签或者用javascript模拟a的hover效果；
• 详情请查看日志：兼容IE6 a标签hover效果

问题五：PNG图片问题

在IE6中不支持png图片的透明

• 解决方法
• 使用javascript进行处理；或者使用gif、jpg图像替代掉png图片的使用。

问题六：子标签无法撑开父标签的高度问题

父标签内部含一个或多个子标签，父标签没有设置浮动，而子标签发生浮动

• 解决方法
  1.在子标签最后添加清除浮动的设置
  <div style='height:0;clear:both'></div>
  2.为父标签添加{overflow:hidden;}的样式
  3.为父标签设置固定高度

问题六：字体显示多一个的问题

多个浮动元素中间夹杂HTML注释语句，浮动元素宽度设置为100%；则在下一行多显示一个上一行的最后一个字符

• 解决方法
• 虽然写注释是一个非常好的习惯但是在IE6中，出现这种情况就需要删除注释

问题七：最大最小宽高问题

IE6浏览器，标签的最低高度/宽度设置（min/max-height）

• 解决方法
• 为IE6单独设置hack，即_height:最小高度值；_width：最小宽度值（对于IE6，当实际宽高超出定义的宽高时，元素会自动调整宽高）。对于最大高度和最大宽度，没有必要设置兼容，当前对于开发者来说，只需要保证IE6下正常显示即可。