4个技巧避免不必要的浏览器兼容性问题

浏览器兼容性问题着实让人头疼,从最初的IE6浏览器到现在HTML5+CSS3的兴起,依然会存在兼容性问题,这里分享几个小技巧来避免这个问题。

CSS3风格的前缀

如果你正在使用最新的 CSS 代码,比如box-sizing,或者background-clip等,确保你使用了合适的供应商前缀。

使用样式重置

大家可以从网上下载写好的样式模板,也可以自己去写,当然建议下载一个完整版,自行保存,这样每次使用的时候可以直接拿来。

避免padding和width一起使用

当你给一个包含 width 的元素加 padding,那它实际显示的要比本应显示的大。因为 width 和 padding 会加到一起。比如一个元素 width 是 100px,又给它加了一个 10px 的 padding。那某些浏览器会将该元素显示成 120px。

为了解决这个问题,可以用如下代码:

清除浮动

在写页面的时候要确保我们把浮动都清理掉了,如果不清理掉,可能会出现很奇怪的情况。

可以用下面 CSS 代码清理浮动:

如果要把你大部分代码都包起来,有个更简单的方法就是把它添加到我们的 wrap 类里面:

这样的话浮动就没清理掉了,想学习更多案例效果的小伙伴可以加我Q群:142991222,一起探索更多前端干货。

掌握这几个小技巧,让它成为日常开发的习惯,会避免90%的跨浏览器不兼容问题,拿走不谢。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,690评论 1 92
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 5,019评论 0 1
  • Ø JavaScript 3 1. HTML对象获取问题 32. const问题 33. event.x与even...
    横冲直撞666阅读 8,390评论 0 7
  • 主要参考文章:http://www.candura.us/posts/post-338/ 需要注意的地方是一定要设...
    huismiling阅读 3,759评论 0 1
  • 心态迁善究竟是什么? 其实,心态迁善并不是一项单独的技能。它来源于教练技术,是教练四步技巧中的一步。 至于什么是教...
    飞翔鸟f8阅读 6,902评论 0 0

友情链接更多精彩内容