原始html渲染与动态JS渲染的间距不同

Spacing different in original html rendering vs dynamic JS rendering

本文关键字：动态 html 原始 JS      更新时间：2023-09-26

这是我的页面的一小部分:

<a href="#"  onclick="PolicyViolation(<%: ViewBag.DeviceData[i].DeviceID%>); return false;">
    <span class="policyViolationsNumber"><%= ViewBag.DeviceData[i].ViolationCount%></span>
    <span>Policy Violations</span>
 </a>

这显示出两个跨度之间有一些空间。

在代码中，我们在JS中更新它: 
var spanViolationNumber = $('<span>')
                           .html(statusModel.Violations)
                           .addClass('policyViolationsNumber');
var spanViolationString = $('<span>')
               .html('<%=ServiceSite.Resources.Resources.DEVICES_POLICY_VIOLATIONS%>');
var imageTag = $('<img>')
                 .attr('src', '/Content/images/error_error.png')
                 .attr('align', 'absmiddle');
var anchorTag = $('<a href="#">')
                   .append(spanViolationNumber)
                   .append(spanViolationString);
cell.empty();
cell.append(imageTag)
    .append(anchorTag);

但是，这显示的跨段之间没有空格。我以前见过这样的小问题，但从来没有弄清楚它是什么。你可以忽略图像标签的东西，它是不相关的。

编辑:

我不知道这个，我猜这是预期的行为:http://jsfiddle.net/2MMuA/

额外的空间是由于你格式化HTML的方式造成的。

"span"标签是一个内联HTML元素。这基本上意味着你需要像对待页面上的文本一样对待它。

<span>Hello</span> <span>World</span>
<!-- Prints Hello World -->
<span>Hello</span>
<span>World</span>
<!-- Prints Hello World
     The line break is where your extra space is coming from. -->
<span>Hello</span><span>World</span>
<!-- prints HelloWorld 
     This is how the ".append()" function is formatting the HTML.
     It adds it literally right after the last character in the HTML. -->

为了规范这两种不同的技术，你要么必须把你的"span"标签放在彼此旁边，这样HTML就不会增加额外的空间…

<span></span><span></span>

. .或者你需要在你的"。append()"函数中手动添加空格。

obj.append(' ' + spanTag);

我希望这对你有帮助!

也许你可以澄清一下…你是说这些跨度之间有空间吗?

<span class="policyViolationsNumber">12</span>
<span>Policy Violations</span>
无论哪种方式，我都会考虑在你的css中添加一些填充或边距来确保你得到你想要的空间，或者至少(尽管不推荐)使用HTML编码的空间，如 
&nbsp;

你的span之间很可能有空格。如果你把两个span紧挨着，那么就不应该有空格。

<span></span><span></span>
相关文章：