浏览器解析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 相关文章推荐
Dom与浏览器兼容性说明
Oct 25 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
js数组去重的方法汇总
Jul 29 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
关于前后端json数据的发送与接收详解
Jul 30 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 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设计模式中单例模式的应用分析
2013/05/15 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
js中escape对应的C#解码函数 UrlDecode
2012/12/16 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
Cython 三分钟入门教程
2009/09/17 Python
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
Python显示进度条的方法
2014/09/20 Python
使用PDB模式调试Python程序介绍
2015/04/05 Python
Python使用matplotlib绘制动画的方法
2015/05/20 Python
名片管理系统python版
2018/01/11 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
Python 去除字符串中指定字符串
2020/03/05 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
大学生收银员求职信分享
2014/01/02 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
吨的认识教学反思
2014/04/27 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
创先争优活动个人总结
2015/03/04 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
详解python的异常捕获
2022/03/03 Python