浏览器解析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 相关文章推荐
js取消单选按钮选中示例代码
Nov 14 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
javascript表单验证大全
Aug 12 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
Vue操作Storage本地化存储
Apr 29 Vue.js
基于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/06/03 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
vue实现简单加法计算器
2020/10/22 Javascript
python 网络编程详解及简单实例
2017/04/25 Python
python批量导入数据进Elasticsearch的实例
2018/05/30 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
python 有效的括号的实现代码示例
2019/11/11 Python
Python列表list操作相关知识小结
2020/01/29 Python
用python进行视频剪辑
2020/11/02 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
linux下进程间通信的方式
2013/01/23 面试题
幼儿生日活动方案
2014/08/27 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
MySQL里面的子查询的基本使用
2021/08/02 MySQL
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android