避免踩坑最基本的一点是你的基本功要非常扎实，为什么这么说，因为前端知识杂，发展快而且本身浏览器各种标准各种bug，一旦你基本不扎实一旦出现问题那真变成一锅粥。
下面这些都是自己亲自踩的坑…..
1.inline-block 产生空隙：设置 font-size:0; 2.浮动元素引起的问题：
- 父元素的高度无法被撑开，影响与父元素同级的元素
- 与浮动元素同级的非浮动元素会跟随其后
- 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
解决：使用 CSS 中的 clear:both; 属性来清除元素的浮动可解决后两个，对于第一个，添加如下样式，给父元素添加clearfix样式
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}.clearfix{display: inline-block;} /* for IE/Mac */
3.typeof null 返回 ‘object’ 所以需要用 value===null 来判断。
4.JS 浮点数四则运算精度丢失：在运算前我们把参加运算的数先升级(10的X的次方)到整数，运算完后再降级(0.1的X的次方)。
5.记住别用== 用===/!==
6.图片居中vertical-align: middle无效，需要在包含图片的div中加入display: table-cell。
7.对某元素使用绝对定位 position: absolute;时，它已经脱了常规文章流，这时候再设置 display 属性是无效的，应为它总是默认显示为 display: block
8.jQuery 操作复选框(checkbox) attr checked无效：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
9.对于css中background-image的图片路径应该是相对这个css文件的路径，而不是应用这个css网页的路径。
对于一般的文件结构（index.html，css，images）,css文件里的路径一般为../images/top.jpg（../表示上一级目录；./表示本级目录）
10.网址路径使用utf-8编码；查询字符串使用操作系统的默认编码；在Ajax调用中，IE总是采用GB2312编码（操作系统的默认编码），而其他浏览器总是采用utf-8编码；GET和POST方法的编码，使用网页的编码。
11.inline-block元素使用text-align: justify两端对齐，所后一行无效：使用元素的::after伪元素强制作为父块的最后一行。
ul::after { content: ''; display: inline-block; width: 100%; }
12.html{-webkit-text-size-adjust: none;} /* 解决Chrome无法显示12号以下字体 */
13.浏览器三种不同的刷新机制：浏览器是通过Last-Modified和Expires来处理缓存的，
F5：不允许浏览器直接使用本地缓存，因此Last-Modified能起作用，但Expires无效
Ctrl+F5：是强制刷新，因此缓存机制失效
“转至”或地址栏里回车：正常的访问，Last-Modified和Expires都有效
14.强制IE重绘
document.documentElement.style.display = ‘block’;
setTimeout(function () {
document.documentElement.style.display = ‘’;
}, 0);
15.height:100% 不起作用
浏览器的计算宽度的缺省值就是父元素的宽度，但是页面并没有缺省的高度值，当设置一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。
所以想要 height:100% 起作用，就要在其父元素上都加入 height:100% 包括 body 个 html 标签。
16.不要直接从数组中delete或remove元素
如果对数组元素直接使用delete，其实并没有删除，只是将元素置为了undefined。数组元素删除应使用splice,删除对象的属性时可以使用delete。
17.关闭当前页 window.open(’’, ‘_self’, ‘’); window.close();
18.base64的图片如果包含“utf8;”会导致IE不兼容。
19.select异步更新option时IE不会更新默认选中项
在之前先隐藏select，代码执行完之后在显示，这样就能触发浏览器重新渲染，option也就显示出来了。
20.防止自动填充密码，添加 autocomplete=“off"无效问题，在 password 之前加一个隐藏的 type=“password"即可。
21.上下margin重合问题，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合，注意这个相邻指的是这两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开，解决办法就是养成好习惯，避免上下都使用边距。
22.jQuery中的chenge方法仅适用于文本域（text field），以及 textarea 和 select 元素。
23.outline不支持浮点像素。
23.IE8不支持：last-child，但是支持：first-child。
24.IE8不支持RGBA，
25.IE8不支持jQuery的append方法
解决：新建一个table标签，再用append插入到table里。
26.P标签不能包含块级元素（包括P自身）。
27.如果使用import方法对CSS进行导入,会导致某些页面在Windows下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。在使用一些框架的文本插值时也会出现这种情况，例如Vue的 {{…}}
解决：使用LINK标签将样式表放在文档HEAD中,对于框架的FOUC，框架自身也提供了自己解决办法，如Vue的v-text指令进行文本插值就能避免。
28.IE8中伪元素动态作用样式不重绘bug。解决方法
29.last-of-type selector only works on node-selectors, not classnames.
30.input标签设置disable会导致不提交该字段，禁止修改inputy应该使用readonly属性，但是redio标签是不支持readonly的，需要使用阻止默认事件来实现效果。
31.background-size：需要单独写，否则在 安卓 4.3 及以下，IOS 6.1及以下不兼容。
32.svg在安卓4.4以下支持的并不好…
33.不要用return false阻止event的默认行为。对于mouseover等几种特殊事件情况下，return false;并不一定能终止事件。应该一直采用W3C标准的event.preventDefault()