浏览器解析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 相关文章推荐
javascript 写类方式之七
Jul 05 Javascript
JavaScript中的排序算法代码
Feb 22 Javascript
利用javascript的面向对象的特性实现限制试用期
Aug 04 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
使用JS组件实现带ToolTip验证框的实例代码
Aug 23 Javascript
Node.js API详解之 os模块用法实例分析
May 06 Javascript
vue中可编辑树状表格的实现代码
Oct 31 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
一个目录遍历函数
2006/10/09 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
AngularJS select加载数据选中默认值的方法
2018/02/28 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中处理时间的几种方法小结
2015/04/09 Python
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
Opencv求取连通区域重心实例
2020/06/04 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
Linux操作面试题
2012/05/16 面试题
电气工程和自动化自荐信范文
2013/12/25 职场文书
考试退步检讨书
2014/01/15 职场文书
建筑学专业自荐书
2014/07/09 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
财务人员岗位职责
2015/02/03 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers