社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > 正文

浏览器解析js生成的html出现样式问题的解决方法_javascript技巧

WBOY
发布： 2016-05-16 17:54:13
原创
990 人浏览过

我实现的功能是添加标签，无刷新地添加到标签列表的最后，见下图中第二行，样式明显有问题
浏览器解析js生成的html出现样式问题的解决方法_javascript技巧
我反反复复地检查了chrome console的html结构，都是一样一样的，在IE和FF下我也认真比较过的，还是没有区别。见下图
浏览器解析js生成的html出现样式问题的解决方法_javascript技巧
同样的html结构，同样的style，竟然展现的样式差异很大，一时没了想法，像个无头苍蝇。索性我就把console下的html复制到notepad++进行对比，看出了一点端倪，见下图。左侧为js生成的html，右侧为页面（.aspx）中的html
浏览器解析js生成的html出现样式问题的解决方法_javascript技巧

引起样式差异的原因可能就是左侧缺少换行，我就在每行字符的末尾加了换行符” ”，这样样式的问题就解决拉

复制代码 代码如下:

var html =
[
"
  • \n".format(catId),
    "
    \n",
    "\n".format(catId),
    "{0}\n".format(catName),
    "[编辑][删除]\n".format(catId),
    "
    ",
    "
    \n",
    "\n".format(catName),
    "\n".format(catId),
    "\n".format(catId),
    "
    \n",
    "
    • \n"
    ].join("");

    经过长时间的思考，解决一个问题，好开心！
    作者：清流鱼
    相关标签：
    html 样式问题
    来源：php.cn
    上一篇：javascript针对DOM的应用分析（二）_DOM 下一篇：javascript针对DOM的应用实例（一）_DOM
    本站声明
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    作者最新文章
    最新问题
    PX自动转换为REM错误  <style>html {   字体大小：calc(100vw / 3.75);      }body {    字体大小：0.16rem；      }</s...
    来自于 2024-04-16 09:34:16
    0
    0
    4687
    页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面，我昨天做了一部分，效果很好，今天我继续做剩下的部分，一切都很好。当我尝试将其作为普通html页面打开时，CSS或BOOTSTRAP不起作用，仅显示页面文本，...
    来自于 2024-04-06 21:58:04
    0
    1
    800
    解决CSS中页面底部神秘空白的方法 我正在尝试使用Bootstrap和D3构建一个简单的网页，但我不知道如何消除底部的所有空白。我想摆脱它。我尝试将body和html的min-height设置为100%，但没有任何作...
    来自于 2024-04-06 20:22:15
    0
    1
    454
    如何在 livewire 惰性占位符中使用 laravel 组件 我想在livewire3占位符内添加我的laravel组件的骨架到目前为止我已经尝试过：通过包含Laravel组件来实现Livewire类：publicfunctionplaceh...
    来自于 2024-04-06 20:02:10
    0
    2
    543
    用 HTML 代码（从数组生成）替换字符串的顶级方法 给定一个像这样的字符串...$htmlPattern="Usernameis:#name#andusercompanyis#company#";如何将子字符串#...
    来自于 2024-04-06 17:40:41
    0
    2
    410
    相关专题
    更多>
    热门推荐
    热门教程
    更多>
    相关教程
    热门推荐
    最新课程
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板