浏览器兼容性问题及解决方案大汇总

所谓浏览器兼容性问题：是指不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的效果。

解决方法

前端开发疆场需要检查浏览器的兼容性，这里推荐（Can I Use）这个查询网址。是一个针对前端开发人员制定的一个查询CSS、JS、HTML5、SVG，可以很好的保证网页在浏览器中的兼容性。

CSS兼容问题

1、不同浏览器的标签默认的内外边框不同。

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

/** * 该文件用于清除浏览器样式 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { padding:0; margin:0; border:0; outline: 0; font-family: "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; word-wrap:break-word; } html, body { width: 100%; height: 100%; } a{ text-decoration: none; -webkit-tap-highlight-color:rgba(255,255,255,0); } ul,ol{ list-style-type: none; } textarea { resize: none; } /*去除input button默认样式*/ input,button,textarea { -webkit-appearance: none; -webkit-tap-highlight-color: rgba(255, 225, 225, 0); padding: 0; border: 0; outline: 0; } // 修改placeholder属性默认文字颜色 input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* WebKit browsers */ color: #999; } input:-moz-placeholder, textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; } input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; }

除了自己定义清除默认样式的代码，也可选择引用别人写好的成熟插件Normalize.css来清除默认样式；

2、图片加a标签在IE9中会有边框

解决方案 ：img{border：none}

3、IE6及更低