与静态布局相比，HTML 动态标签插入看起来不同答案

【问题标题】：HTML dynamic tags insert looks different compared to static layout与静态布局相比，HTML 动态标签插入看起来不同
【发布时间】：2010-05-05 21:16:05
【问题描述】：

我用 jquery 编写 HTML 界面。页面上有可编辑的出版物列表，用户可以单击任何出版物来编辑详细信息。弹出窗口显示数据，并且在详细信息表单中嵌入了作者列表。每个人都有编辑/删除按钮+“添加新作者”按钮。用户无需重新加载页面即可操纵作者。当我插入新作者时，会动态创建新的编辑/删除按钮并嵌入到页面中。

我插入这样的标签：

<td class="author-actions">
    <img onclick='edit(id)' .../>
    <img onclick='delete(id)' .../>
</td>

出现弹出窗口时从网络服务器发送的相同 html 布局。但不知何故，它看起来不同。尽管 firebug 演示了应用相同的 css 属性，但图像之间存在额外空间。

如果我在 IE 中使用鼠标插入布局进行选择，它会以某种方式重新排序并变得与那些由网络服务器发送的相同外观。

会是什么？

【问题讨论】：

我认为您的问题是 IE 和 firefox（以及几乎所有浏览器）在他们认为默认网页的外观方面存在差异。尝试查找“CSS 重置”页面。它是您在文件顶部拥有的一组 CSS 命令，因此首先应用并被后面的规则覆盖，从而将您的页面设置为一个很好的一致空白状态。
“检查元素”图像并查看 FireBug HTML 选项卡内部以查看图像周围的元素。可能是不必要的空格。
是的，没错。用jquery（append.append）构建页面没有换行符，但是静态布局有。

标签： jquery html

【解决方案1】：

图像是内联元素，如果每个 img 之间有任何换行符或空格，则会在每个元素之间添加一个空格，就像段落中的单词一样。您可以通过删除元素之间的任何空格/换行符来解决此问题。

【讨论】：

是的，我的静态布局有换行符，但是 jquery 构造 (.append.append...) 不会插入任何换行符或空格:)

【解决方案2】：

当您拥有超链接图像时，这一点尤其明显。

<a href="http://www.google.com/">
  <img src="google_logo.png" width="32" height="32" border="0"/>
</a>

alt text http://img179.imageshack.us/img179/8580/blueunderline.png

使用上述方法，您通常会得到“额外的蓝色下划线”效果，这是由于在关闭 </a> 之前图像后的空白。

解决此问题的方法是简单地删除空格。

【讨论】：