浏览器解析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的将DropDownlist的选中值赋给label的实现代码
May 06 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
详解如何让Express支持async/await
Oct 09 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
微信小程序canvas分享海报功能
Oct 31 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 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
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
php中变量及部分适用方法
2008/03/27 PHP
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
python设置windows桌面壁纸的实现代码
2013/01/28 Python
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
轻量级的Web框架Flask 中模块化应用的实现
2017/09/11 Python
python数据结构之列表和元组的详解
2017/09/23 Python
python http接口自动化脚本详解
2018/01/02 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
社团成立邀请函
2014/01/08 职场文书
企业宗旨标语
2014/06/10 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis
Golang bufio详细讲解
2022/04/21 Golang
zabbix配置nginx监控的实现
2022/05/25 Servers