为什么会有浏览器兼容问题浏览器兼容性问题，是指因为不同的浏览器标准不同对同一段代码的解析有差异或者是统一浏览器由于版本的不同，导致支持的特性不一样，造成页面显示效果不一致在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的页面，都应该是统一的效果，所以需要一些方法让他的页面显示效果一致，今天小编就来说说关于前端要考虑的浏览器兼容?下面更多详细答案一起来看看吧!
前端要考虑的浏览器兼容
为什么会有浏览器兼容问题
浏览器兼容性问题，是指因为不同的浏览器标准不同对同一段代码的解析有差异或者是统一浏览器由于版本的不同，导致支持的特性不一样，造成页面显示效果不一致。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的页面，都应该是统一的效果，所以需要一些方法让他的页面显示效果一致。
部分兼容问题解决方案
问题一：不同浏览器的标签默认的内外边距不同
//解决方案： *{margin:0;padding:0;}
问题二：图片默认有间距
解决方案：使用float属性为img布局（问题一中提到的通配符不起作用）
问题三：li之间有间距
解决方法：li设置vertical-align:middle
问题四：标签最低高度设置min-height不兼容
解决方案：设置一个标签的最小高度200px
p{min-height:200px; height:auto !important; height:200px; overflow:visible; }
问题五：ie各个版本的Hack
//类内部hack： .header {_width:100px;} /* IE6专用*/ .header {* width:100px;} /* IE7专用*/ .header {*width:100px;} /* IE6、IE7共用*/ .header {width:100px\0;} /* IE8、IE9共用*/ .header {width:100px\9;} /* IE6、IE7、IE8、IE9共用*/ .header {width:330px\9\0;} /* IE9专用*/ //选择器Hack： *HTML .header{} /*IE6*/ * html .header{} /*IE7*/
问题六：常见属性的兼容情况
- inline-block: >=ie8min-width/min-height: >=ie8:before,:after: >=ie8div:hover: >=ie7inline-block: >=ie8background-size: >=ie9圆角: >= ie9阴影: >= ie9动画/渐变: >= ie10
问题七：clear float
.clearfix:after{ content: ''; display: block; clear: both; } .clearfix{ *zoom: 1; /* 仅对ie67有效 */ }
可能用到的技巧和工具
- 条件注释
条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
,
