所谓浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。
浏览器兼容问题一:不同浏览器的标签默认的内外补丁不同(margin padding)
频率:100%
解决方案:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大
频率:90%(float布局最常见的浏览器兼容问题)
解决方案:在float的标签样式控制中加入display:inline,将其转化为行内属性
浏览器兼容问题三:设置较小高度标签(一般小于10px)
频率:60%
解决方案:
1、给超出高度的标签设置overflow:hidden
2、设置行高line-height小于你设置的高度
浏览器兼容问题四:行内标签,设置display:block后采用float布局,又有横向的margin的情况
频率:20%
解决方案:在display:block;后面加入display:inline;display:table;
浏览器兼容问题五:图片默认有间距
频率:20%
解决方案:使用float属性为img布局
浏览器兼容问题六:标签最低高度设置min-height不兼容
频率:5%
解决方案:如果我们设置一个标签的最小高度是200px,需要进行的设置为:
{min-height:200px;height:auto !importAnt;height:200px;overflow:visible}
浏览器兼容问题七:透明的的兼容CSS设置
所有浏览器通用
height:100px;
IE6专用
_height:100px; *height:100px;
IE7专用
*+height:100px
IE7和FF共用
height:100px !important;
*+html 对IE7的兼容 必须保证HTML顶部有如下声明:
<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN""/TR/html4/loose.dtd">
如果觉得《浏览器兼容性问题与解决方案》对你有帮助,请点赞、收藏,并留下你的观点哦!