浏览器解析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 相关文章推荐
SWFObject Flash js调用类
Jul 08 Javascript
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
简单实现js放大镜效果
Jul 24 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
原生JS实现前端本地文件上传
Sep 08 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
js实现滑动滑块验证登录
Jul 24 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
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
php生成shtml类用法实例
2014/12/09 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
domReady的实现案例
2016/11/23 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
Python实现分数序列求和
2020/02/25 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
财务会计专业推荐信
2013/11/30 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
Python中的tkinter库简单案例详解
2022/01/22 Python
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python