瀏覽器解析js生成的html出現(xiàn)樣式問(wèn)題的解決方法_javascript技巧

我實(shí)現(xiàn)的功能是添加標(biāo)簽，無(wú)刷新地添加到標(biāo)簽列表的最后，見(jiàn)下圖中第二行，樣式明顯有問(wèn)題

我反反復(fù)復(fù)地檢查了chrome console的html結(jié)構(gòu)，都是一樣一樣的，在IE和FF下我也認(rèn)真比較過(guò)的，還是沒(méi)有區(qū)別。見(jiàn)下圖

同樣的html結(jié)構(gòu)，同樣的style，竟然展現(xiàn)的樣式差異很大，一時(shí)沒(méi)了想法，像個(gè)無(wú)頭蒼蠅。索性我就把console下的html復(fù)制到notepad++進(jìn)行對(duì)比，看出了一點(diǎn)端倪，見(jiàn)下圖。左側(cè)為js生成的html，右側(cè)為頁(yè)面（.aspx）中的html

引起樣式差異的原因可能就是左側(cè)缺少換行，我就在每行字符的末尾加了換行符” ”，這樣樣式的問(wèn)題就解決拉
代碼如下:
var html =
[
"

\n".format(catId),
"\n",
"\n".format(catId),
"{0}\n".format(catName),
"[編輯][刪除]\n".format(catId),
"",
"\n",
"\n".format(catName),
"確定\n".format(catId),
"取消\n".format(catId),
"\n",
"

\n"
].join("");

經(jīng)過(guò)長(zhǎng)時(shí)間的思考，解決一個(gè)問(wèn)題，好開(kāi)心！
作者：清流魚(yú)

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com