导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

• 浏览器默认的margin和padding不同。解决方案是加一个全局的 * { margin:0;padding:0; } 来统一。
• IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用getAttribute()获取自定义属性; Firefox(6-)下,只能使用getAttribute()获取自定义属性。 解决方法:统一通过getAttribute()获取自定义属性。
  • 获取 <div class="container" data-sw="lance"> 中自定义属性sw的值
  • document.querySelector(".container").getAttribute("data-sw");
    • 设置: setAttribute("data-sw", "233");
  • document.querySelector(".container").attributes['data-sw'].value;
    • 设置: attributes['data-sw'].value = '233';
  • document.querySelector(".container").dataset['sw'];
    • 设置: dataset['sw'] = '233';
• Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
• 超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:
  • L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

overflow: scroll 时不能平滑滚动的问题怎么处理？

一个 div 使用了 overflow:scroll; ，在移动端可以滚动，但是无法平滑滚动（就像浏览网页那样）

开启滚动硬件加速

-webkit-overflow-scrolling: touch;