浏览器解析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 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
JavaScript函数、方法、对象代码
Oct 29 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
javascript面向对象之this关键词用法分析
Jan 13 Javascript
javascript实现计时器的简单方法
Feb 21 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
JavaScript实现刷新不重记的倒计时
Aug 10 Javascript
整理一下常见的IE错误
Nov 18 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
vue中注册自定义的全局js方法
Nov 15 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
PHP APC缓存配置、使用详解
2014/03/06 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
python中的插入排序的简单用法
2021/01/19 Python
HTML5 Web 存储详解
2016/09/16 HTML / CSS
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
实习单位接收函模板
2014/01/10 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
北京申奥口号
2014/06/19 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
出生证明范本
2015/06/15 职场文书
高中运动会广播稿
2015/08/19 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
MySQL注入基础练习
2021/05/30 MySQL