浏览器解析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 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
详解vue axios二次封装
Jul 22 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 Javascript
js实现复制粘贴的两种方法
Dec 04 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+ajax导入大数据时产生的问题处理
2014/06/11 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
python3.x实现发送邮件功能
2018/05/22 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
python调用摄像头拍摄数据集
2019/06/01 Python
python开发之anaconda以及win7下安装gensim的方法
2019/07/05 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
python 两种方法删除空文件夹
2020/09/29 Python
请用用Java代码写一个堆栈
2012/01/26 面试题
.net C#面试题
2012/08/28 面试题
生产车间主任的个人自我鉴定
2013/10/25 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js