前端Bug解决方案
一、结构层（HTML）
HTML出错的主要原因是对规范不够理解，没有按照规范来布局。
错误1. 标签嵌套混乱
例1：比如常见的p标签里嵌套div标签
<p>我是一个段落<div>我是一个块级元素div>我是一个段落p>例2：缺少结束标签，或结束标签时机不对。
有时候往往是一个标签没有闭合导致整个布局错乱。
/*错误代码*/
<div><a href="">1111<p>2222p>div><p>3333p>aaaa>
/*正确代码*/
<div><a href="">1111<p>2222p>div><p>3333p>aaaa>错误原因：DTD中规定了块级元素是不能放在P里;P标签内包含块元素时，它会先结束自己。另外提一下，内联元素不可以包含块元素。解决思路：如上图，就是谷歌浏览器按F12（command+option）打开控制台看元素。
错误2.滥使用br标签
br标签作用在于换行的，而被用来增加行间距和内联元素之间的换行。
/*错误代码*/
<p>
我是一句话
<br />
<br />
我是一句话
<br />
<br />
我是一句话
p>
<br />
<br />
<br />
<p>
<a href="">我是一个链接a> <br />
<a href="">我是一个链接a> <br />
<a href="">我是一个链接a> <br />
p>
/*正确代码*/
<p>
我是一句话<br />
我是一句话<br />
我是一句话
p>
<ul>
<li><a href="">我是一个链接a>li>
<li><a href="">我是一个链接a>li>
<li><a href="">我是一个链接a>li>
ul>
错误原因： br标签目的在于换行，作为增加间距不能准确的给出具体的间距大小，作为列表不能明确的表示这是一个列表。解决思路：，通常是用line-height来调整行间距，用padding来解决段落之间的间距。这样也能很好的做到结构样式分离。
错误3.使用内联的样式
为了代码结构清晰，结构样式分离，我们不推荐使用内联样式。另外当有行为层的时候我们大多通过js来改变的是内联样式。在结构使用内联样式会带来很多麻烦。
/*错误代码*/
<img src="" border="0" alt="">
<div style="width: 200px; height: 40px;line-height: 40px;...">不在此一一列举，若你遇到代表性问题欢迎留言！参考:10种常见的HTML标签错误写法
二、表现层（CSS）
少数原因由于粗心大意少写了分号或者结尾的花括号｝导致后面的样式都不起作用了。或者单词拼写错误引起的样式无效。在开发过程中建议使用代码提示，自动补全功能的编辑器（比如：WebStorm）。学习练习的时候使用手写的编辑器。
css错误大多来自对css权重的不理解。排除粗心因素通常遇到到设置的样式不起作用就是这类原因。
错误1：z-index不起作用，或者是负的margin值会影响z-index？。
p{background-color: red; width: 200px; height: 100px ; position: relative; z-index: 1}
div{background-color: green;width: 200px; height: 100px; margin-top: -50px ;z-index: 999}
我是一个段落
我是一个块
错误原因，定位影响层级，定位元素层级高。z-index无效。另外浮动元素也影响层级。
错误2：在用background-image设置渐变背景的时候，在hover的时候设置background：none无效，还是有渐变背景。
解决方案：在hover的时候设置background-image:none才能清除渐变背景。
错误3：有的浏览器正常有的浏览器不正常
这里主要针对css3的兼容性，关于低版本的ie不做考虑。抵制垃圾浏览器从我做起！
例如
display:flex
display:-webkit-flex错误原因：没有做兼容性处理；
三、行为层（JavaScript）
错误1：找不到对象
例如:
<div id="div1">
div>
<script type="text/javascript">
document.querySelector("#div1 > div").innerHTML = "first div";
alert("111111111111");
script>当我们运行这段代码的时候报出了一个错误
"Uncaught TypeError: Cannot set property 'innerHTML' of null" /AJAX_TEST/selector_test.html (43)这个时候我们只要根据错误提示找到出错的地方(43)行，这个时候我们会发现这段代码
document.querySelector("#div1 > div").innerHTML = "first div";出错的原因就是document.querySelector("#div1 > div")该选择器找不到该元素节点，然后我们根据选择器找到节点
<div id="div1">
div>发现该元素节点被注释掉了，我们将该注释取消就OK了
解决思路：在谷歌浏览器控制台查看有没有报错。有报错的，根据报错提示，直接找到报错的那行代码。
用注释法或者alert输出法查找原因。
错误2:方法/变量未定义
例如：通过类名获取元素在有的浏览器不支持
解决思路：用if判断如果浏览器支持的情况下怎么出来，不支持的情况下怎么处理，兼容性处理如下
function getClass(n){
if(document.getElementsByClassName){
return document.getElementsByClassName(n);
}else{
var objArr=document.getElementsByTagName('*');
var arrClass=[];
for(var i=0;ivar nameArr = objArr[i].className.split(' ');
for(var j=0;jif(nameArr[j]==n){
arrClass.push(objArr[i]);
}
}
}
return arrClass;
}