浏览器解析js生成的html出现样式问题的解决方法


Posted in Javascript onApril 16, 2012

我实现的功能是添加标签,无刷新地添加到标签列表的最后,见下图中第二行,样式明显有问题
浏览器解析js生成的html出现样式问题的解决方法
我反反复复地检查了chrome console的html结构,都是一样一样的,在IE和FF下我也认真比较过的,还是没有区别。见下图
浏览器解析js生成的html出现样式问题的解决方法
同样的html结构,同样的style,竟然展现的样式差异很大,一时没了想法,像个无头苍蝇。索性我就把console下的html复制到notepad++进行对比,看出了一点端倪,见下图。左侧为js生成的html,右侧为页面(.aspx)中的html
浏览器解析js生成的html出现样式问题的解决方法

引起样式差异的原因可能就是左侧缺少换行,我就在每行字符的末尾加了换行符”\n”,这样样式的问题就解决拉

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("");

经过长时间的思考,解决一个问题,好开心!
作者:清流鱼
Javascript 相关文章推荐
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 Javascript
js 求时间差的实现代码
Apr 26 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
JS实现图片幻灯片效果代码实例
May 21 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 #Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 #Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 #Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 #Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 #Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 #Javascript
javascript针对DOM的应用分析(四)
Apr 15 #Javascript
You might like
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
PHP函数常用用法小结
2010/02/08 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
2016/08/05 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
js实现漫天星星效果
2017/01/19 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
Python爬虫爬验证码实现功能详解
2016/04/14 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
python如何实现反向迭代
2018/03/20 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
python matlab库简单用法讲解
2020/12/31 Python
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
宪法宣传周工作方案
2014/05/26 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
JavaScript实现简单拖拽效果
2021/09/15 Javascript