CSS常见浏览器兼容性问题与解决方案

 在前端项目中,经常会碰到需要处理不同浏览器兼容性的CSS样式,故在此做初步的记录总结,后续继续更新完善。

  • 问题一.不同浏览器的标签默认的外补丁和内补丁不同

现象:不同浏览器标签的margin/padding差异较大

解决方案:*{margin:0;padding:0}

  • 问题二. 块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大

现象:在横向布局中,使用div float布局时,同时横向间距设置用margin实现时,在IE6中后面的一块会被顶到下一行

解决方案:在float的CSS标签样式控制中添加display:inline,将其转换为行内属性

  • 问题三. 设置较小高度标签(一般小于10px),在IE6/7,遨游浏览器中高度超出自己设置的高度。

原因:IE8以前的浏览器会给标签一个最小默认行高,即使为空

解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height小于设置的高度

  • 问题四. 图片默认有间距

现象:几个img标签放在一起时,有些浏览器会有默认间距,即使使用问题一的通配符也不行

解决方案:为img使用float属性布局

  • 问题五. 给标签设置最低高度min-height不兼容问题

原因:min-height本身即兼容性较差。 有时需求当容器高度小于300px时,为300px,大于时则被撑高,而不是出现功滚动条。此时会出现该问题

解决方案:采用 {min-height: 200px; height: auto !important; height:200px; overflow:visable;}

  • 问题六. 透明度的兼容CSS设置

解决方案:设置透明度时,写2个。
opacity:0;
filter:alpha(opacity:0)

你可能感兴趣的:(HTML/CSS基础教程学习,css,css3,html)