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

时间:2014-06-28 00:07:51

标签: javascript jquery html

以下是我页面的一小部分:

<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/

3 个答案:

答案 0 :(得分:2)

由于您格式化HTML的方式,正在发生额外的空间。

&#34; span&#34; tag是内联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. -->

为了在两种不同的技术中规范化这一点,你要么必须要对抗你的&#34; span&#34;标签彼此相邻,因此HTML不会添加额外的空间......

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

..或者您需要在&#34; .append()&#34;中手动添加空格。功能

obj.append(' ' + spanTag);

我希望有所帮助!

答案 1 :(得分:1)

也许你可以澄清......你在谈论这些跨度之间是否存在空间?

<span class="policyViolationsNumber">12</span>
<span>Policy Violations</span>

无论哪种方式,我都会考虑为你的css添加一些填充或边距,以确保你得到你想要的空间或至少(虽然不推荐)使用像这样的HTML编码空间

&nbsp;

答案 2 :(得分:0)

您的跨度之间很可能存在空格。如果你将跨度完全放在一起,则应该没有空格。

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