浏览器解析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 相关文章推荐
express的中间件cookieParser详解
Dec 04 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
老生常谈Bootstrap媒体对象
Jul 06 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 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代码收集表单内容并写入文件的代码
2012/01/29 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
es6函数中的作用域实例分析
2020/04/18 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
Python中的exec、eval使用实例
2014/09/23 Python
python中的字符串内部换行方法
2018/07/19 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
Python中的类与类型示例详解
2019/07/10 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
信息专业个人的自我评价
2013/12/27 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
亲子读书活动方案
2014/02/22 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
社区党建工作总结2015
2015/05/13 职场文书
指导老师鉴定意见
2015/06/05 职场文书