沒錯(cuò)！我正在寫bug呢！不管你是小白還是大牛，寫bug無可避免，遇到bug怎么辦？別慌！毛主席教導(dǎo)我們“戰(zhàn)略上藐視BUG，戰(zhàn)術(shù)上重視BUG”！

前端遇到的bug無非就三個(gè)方面結(jié)構(gòu)層(HTML)，表現(xiàn)層(CSS)，行為層(JavaScript)。

一、結(jié)構(gòu)層(HTML)

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

錯(cuò)誤1. 標(biāo)簽嵌套混亂

例1：比如常見的p標(biāo)簽里嵌套div標(biāo)簽

我是一個(gè)段落

我是一個(gè)塊級元素我是一個(gè)段落

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

例2：缺少結(jié)束標(biāo)簽，或結(jié)束標(biāo)簽時(shí)機(jī)不對。

有時(shí)候往往是一個(gè)標(biāo)簽沒有閉合導(dǎo)致整個(gè)布局錯(cuò)亂。

/*錯(cuò)誤代碼*/

1111

2222

3333

aaa

/*正確代碼*/

1111

2222

3333

aaa

錯(cuò)誤原因：DTD中規(guī)定了塊級元素是不能放在P里;P標(biāo)簽內(nèi)包含塊元素時(shí)，它會先結(jié)束自己。另外提一下，內(nèi)聯(lián)元素不可以包含塊元素。

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

錯(cuò)誤2.濫使用br標(biāo)簽

br標(biāo)簽作用在于換行的，而被用來增加行間距和內(nèi)聯(lián)元素之間的換行。

/*錯(cuò)誤代碼*/

我是一句話

我是一句話

我是一句話

我是一個(gè)鏈接

我是一個(gè)鏈接

我是一個(gè)鏈接

/*正確代碼*/

我是一句話

我是一句話

我是一句話

• 我是一個(gè)鏈接
• 我是一個(gè)鏈接
• 我是一個(gè)鏈接

錯(cuò)誤原因： br標(biāo)簽?zāi)康脑谟趽Q行，作為增加間距不能準(zhǔn)確的給出具體的間距大小，作為列表不能明確的表示這是一個(gè)列表。

解決思路：，通常是用line-height來調(diào)整行間距，用padding來解決段落之間的間距。這樣也能很好的做到結(jié)構(gòu)樣式分離。

錯(cuò)誤3.使用內(nèi)聯(lián)的樣式

為了代碼結(jié)構(gòu)清晰，結(jié)構(gòu)樣式分離，我們不推薦使用內(nèi)聯(lián)樣式。另外當(dāng)有行為層的時(shí)候我們大多通過js來改變的是內(nèi)聯(lián)樣式。在結(jié)構(gòu)使用內(nèi)聯(lián)樣式會帶來很多麻煩。

/*錯(cuò)誤代碼*/

/*正確代碼*/

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

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

二、表現(xiàn)層(CSS)

少數(shù)原因由于粗心大意少寫了分號或者結(jié)尾的花括號｝導(dǎo)致后面的樣式都不起作用了?；蛘邌卧~拼寫錯(cuò)誤引起的樣式無效。在開發(fā)過程中建議使用代碼提示，自動補(bǔ)全功能的編輯器(比如：WebStorm)。學(xué)習(xí)練習(xí)的時(shí)候使用手寫的編輯器。

css錯(cuò)誤大多來自對css權(quán)重的不理解。排除粗心因素通常遇到到設(shè)置的樣式不起作用就是這類原因。

錯(cuò)誤1：z-index不起作用，或者是負(fù)的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}

我是一個(gè)段落

我是一個(gè)塊

錯(cuò)誤原因，定位影響層級，定位元素層級高。z-index無效。另外浮動元素也影響層級。

解決思路：查找CSS錯(cuò)誤的完整步驟

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

錯(cuò)誤2：在用background-image設(shè)置漸變背景的時(shí)候，在hover的時(shí)候設(shè)置background：none無效，還是有漸變背景。

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

錯(cuò)誤3：有的瀏覽器正常有的瀏覽器不正常

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

例如

display:flex

display:-webkit-flex

錯(cuò)誤原因：沒有做兼容性處理；

解決方案：CSS3新特性，兼容性，兼容方法總結(jié)

三、行為層(JavaScript)

錯(cuò)誤1：找不到對象

例如:

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

alert("111111111111");

當(dāng)我們運(yùn)行這段代碼的時(shí)候報(bào)出了一個(gè)錯(cuò)誤

"Uncaught TypeError: Cannot set property 'innerHTML' of null" /AJAX_TEST/selector_test.html (43)

這個(gè)時(shí)候我們只要根據(jù)錯(cuò)誤提示找到出錯(cuò)的地方(43)行，這個(gè)時(shí)候我們會發(fā)現(xiàn)這段代碼

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

出錯(cuò)的原因就是document.querySelector("#div1 > div")該選擇器找不到該元素節(jié)點(diǎn)，然后我們根據(jù)選擇器找到節(jié)點(diǎn)

發(fā)現(xiàn)該元素節(jié)點(diǎn)被注釋掉了，我們將該注釋取消就OK了

解決思路：在谷歌瀏覽器控制臺查看有沒有報(bào)錯(cuò)。有報(bào)錯(cuò)的，根據(jù)報(bào)錯(cuò)提示，直接找到報(bào)錯(cuò)的那行代碼。

用注釋法或者alert輸出法查找原因。

錯(cuò)誤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;

}

小結(jié)：JavaScript錯(cuò)誤處理方式

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。