浏览器解析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 相关文章推荐
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
javascript 判断整数方法分享
Dec 16 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 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的FTP学习(一)
2006/10/09 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
jQuery Ajax使用 全解析
2010/12/15 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
Javascript复制实例详解
2016/01/28 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
Javascript的比较汇总
2016/07/25 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
Python实现合并字典的方法
2015/07/07 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
django使用xadmin的全局配置详解
2019/11/15 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
python如何编写win程序
2020/06/08 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
Linux的文件类型
2012/03/07 面试题
大学生翘课检讨书范文
2014/10/06 职场文书
教师师德表现自我评价
2015/03/05 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
生活小常识广播稿
2015/08/19 职场文书
Oracle 死锁的检测查询及处理
2021/09/25 Oracle
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL