admin管理员组文章数量:1130349
所谓浏览器兼容性问题:是指不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的效果。
解决方法
前端开发疆场需要检查浏览器的兼容性,这里推荐(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, t
所谓浏览器兼容性问题:是指不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的效果。
解决方法
前端开发疆场需要检查浏览器的兼容性,这里推荐(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, t
版权声明:本文标题:浏览器兼容性问题及解决方案大汇总 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://it.en369.cn/jiaocheng/1754358518a2677695.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。


发表评论