【前端】css兼容性问题记录

最新推荐文章于 2026-01-08 15:20:45 发布

原创最新推荐文章于 2026-01-08 15:20:45 发布 · 341 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css

前端专栏收录该内容

4 篇文章

订阅专栏

本文探讨了div作为按钮的CSS技巧，如禁止文字选择和鼠标样式调整，解决了jQuery事件重复触发的问题，提供了事件解绑的方法，展示了如何阻止事件冒泡，揭示了IE9及以下版本对flex和let的支持情况，解析了Chrome跨页面锚点定位特性，阐述了IE对背景渐变和伪元素:before的兼容性问题，以及如何避免渐变到白色时出现的错误。同时，深入介绍了background属性的全面应用，包括其各个组成部分，并对比了使用单个属性与复合属性的优劣。

div作为按钮时，添加user-select:none;按钮中文字不可被选择
cursor:pointer;鼠标悬停指针变成手
jQuery的on事件多次触发问题
在on之前先用off()解绑
阻止事件冒泡


flex: 不兼容IE9及以下


let: IE10及以下不兼容


chrome跨页面锚点定位，不加target:_black会成功，否则定位失效

IE9及以下：背景色渐变和：before不兼容
背景色会填充整个元素，使得border-radius失效。
 解决：加一个父元素，给这个父元素加border-radius并没有用。
 背景色渐变时，渐变成白色使用#fff会有问题，使用#ffffff可以解决

background包含：
    background-color
    background-position
    background-size
    background-repeat
    background-origin
    background-clip
    background-attachment
    background-image
通常建议使用这个属性，而不是分别使用单个属性，
因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。


matchMedia()方法，IE9及以下不支持
改用innerWidth，所以，多媒体查询其实就是看一下窗口显示的宽度吗