沒錯！我正在寫bug呢！不管你是小白還是大牛，寫bug無可避免，遇到bug怎么辦？別慌！毛主席教導我們“戰略上藐視BUG，戰術上重視BUG”！

前端遇到的bug無非就三個方面結構層(HTML)，表現層(CSS)，行為層(JavaScript)。

一、結構層(HTML)

HTML出錯的主要原因是對規范不夠理解，沒有按照規范來布局。網上搜到很多常見的HTNML錯誤都是如此：

錯誤1. 標簽嵌套混亂

例1：比如常見的p標簽里嵌套div標簽

我是一個段落

我是一個塊級元素我是一個段落

瀏覽器解析后就變成這樣了

例2：缺少結束標簽，或結束標簽時機不對。

有時候往往是一個標簽沒有閉合導致整個布局錯亂。

/*錯誤代碼*/

1111

2222

3333

aaa

/*正確代碼*/

1111

2222

3333

aaa

錯誤原因：DTD中規定了塊級元素是不能放在P里;P標簽內包含塊元素時，它會先結束自己。另外提一下，內聯元素不可以包含塊元素。

解決思路：如上圖，就是谷歌瀏覽器按F12(command+option)打開控制臺看元素。

錯誤2.濫使用br標簽

br標簽作用在于換行的，而被用來增加行間距和內聯元素之間的換行。

/*錯誤代碼*/

我是一句話

我是一句話

我是一句話

我是一個鏈接

我是一個鏈接

我是一個鏈接

/*正確代碼*/

我是一句話

我是一句話

我是一句話

• 我是一個鏈接
• 我是一個鏈接
• 我是一個鏈接

錯誤原因： br標簽目的在于換行，作為增加間距不能準確的給出具體的間距大小，作為列表不能明確的表示這是一個列表。

解決思路：，通常是用line-height來調整行間距，用padding來解決段落之間的間距。這樣也能很好的做到結構樣式分離。

錯誤3.使用內聯的樣式

為了代碼結構清晰，結構樣式分離，我們不推薦使用內聯樣式。另外當有行為層的時候我們大多通過js來改變的是內聯樣式。在結構使用內聯樣式會帶來很多麻煩。

/*錯誤代碼*/

/*正確代碼*/

不在此一一列舉，若你遇到代表性問題歡迎留言！參考:10種常見的HTML標簽錯誤寫法

小結：結構層(HTML)問題的解決方案就是谷歌瀏覽器按F12(command+option)打開控制臺看元素結構是不是你設想的一樣。

二、表現層(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無效。另外浮動元素也影響層級。

解決思路：查找CSS錯誤的完整步驟

小結：表現層(CSS)解決方案還是利用瀏覽器的元素審查功能，查看你的元素，給元素添加行內樣式測試是否有效。如果你的css樣式經常不起作用。請認真閱讀下面兩篇文章css權重和Css常用的排序方式權重分配

錯誤2：在用background-image設置漸變背景的時候，在hover的時候設置background：none無效，還是有漸變背景。

解決方案：在hover的時候設置background-image:none才能清除漸變背景。

錯誤3：有的瀏覽器正常有的瀏覽器不正常

這里主要針對css3的兼容性，關于低版本的ie不做考慮。抵制垃圾瀏覽器從我做起！

例如

display:flex

display:-webkit-flex

錯誤原因：沒有做兼容性處理；

解決方案：CSS3新特性，兼容性，兼容方法總結

三、行為層(JavaScript)

錯誤1：找不到對象

例如:

document.querySelector("#div1 > div").innerHTML = "first div";

alert("111111111111");

當我們運行這段代碼的時候報出了一個錯誤

"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")該選擇器找不到該元素節點，然后我們根據選擇器找到節點

發現該元素節點被注釋掉了，我們將該注釋取消就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;i

var nameArr = objArr[i].className.split(' ');

for(var j=0;j

if(nameArr[j]==n){

arrClass.push(objArr[i]);

}

}

}

return arrClass;

}

小結：JavaScript錯誤處理方式

1.通過谷歌或火狐瀏覽器控制臺查看錯誤提示，定位錯誤代碼，打斷點定位錯誤代碼。

2.如果沒錯誤提示的，在源代碼中用alert輸出，或者逐步注釋功能代碼塊，定位錯誤代碼片段。

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的php未正确拼写字 css,前端Bug解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。