浏览器解析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 相关文章推荐
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
javascript实现控制文字大中小显示
Apr 28 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 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中Collection 类的设计
2013/06/21 PHP
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
django中嵌套的try-except实例
2020/05/21 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
西安交大自主招生自荐信
2014/01/27 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
西湖英语导游词
2015/02/06 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书