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

更新時(shí)間：2012年04月16日 14:57:18 作者：

接觸css, javascript有三年多了，今天遇到的問題最令我不可思議，很容易給人一種錯(cuò)覺，那就是js拼成的html結(jié)構(gòu)肯定有問題

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

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

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

引起樣式差異的原因可能就是左側(cè)缺少換行，我就在每行字符的末尾加了換行符”\n”，這樣樣式的問題就解決拉

復(fù)制代碼代碼如下:

 
var html = 
[ 
"<li id=\"litem_{0}\">\n".format(catId), 
"<div>\n", 
"<span class=\"checkbox\"><input type=\"checkbox\" name=\"cbItem\" value=\"{0}\" /></span>\n".format(catId), 
"<span class=\"name\">{0}</span>\n".format(catName), 
"<span><a href=\"javascript:void(0);\" onclick=\"Blog.Cat.edit({0});\">[編輯]</a><a href=\"javascript:void(0);\" onclick=\"Blog.Cat.delCat({0});\">[刪除]</a></span>\n".format(catId), 
"</div>", 
"<div style=\"display:none;\">\n", 
"<span><input type=\"text\" value=\"{0}\"/></span>\n".format(catName), 
"<span><button type=\"button\" class=\"button\" onclick=\"Blog.Cat.setCat({0});\">確定</button></span>\n".format(catId), 
"<span><button type=\"button\" class=\"button\" onclick=\"Blog.Cat.cancel({0});\">取消</button></span>\n".format(catId), 
"</div>\n", 
"</li>\n" 
].join(""); 