动态加载的元素与静态元素不同，尽管它们具有相同的HTMl

Question

我在ASP.NET MVC 3中工作并从模型构建我的html页面如下：

foreach (var item in Model.OfficialHolidaysViewModel.OfficialHolidaysForCurrentYear) 
{
   <li class="date-label"  data-id=@item.OfficialHolidayID data-date=@item.ShortDateString data-type="OfficialHoliday">
      <span class=date-text>@item.ShortDateString</span>
      <img alt="close icon" class="date-close-icon" src="/Content/Images/x_icon.png" />
   </li>
}

将呈现和html元素，例如：

     <li class="date-label" data-id="5" data-date="5/28/2013" data-type="OfficialHoliday">
        <span class="date-text">5/28/2013</span>
        <img alt="close icon" class="date-close-icon" src="/Content/Images/x_icon.png">
     </li>

这看起来像：

但是，当我使用jquery插入一个新元素时：

$('#OfficialHolidaysCurrentYear').append(
       '<li class="date-label" data-id="' + dateID + '" data-date="' + dateString + '" data-type="' + dataType +'">' +
            '<span class="date-text">' + toRomanianLiteralFormat(dateString) + '</span>' +
            '<img alt="close icon" class="date-close-icon" src="/Content/Images/x_icon.png" />' +
       '</li>')

这个get参数化正确，结果是html：

        <li class="date-label" data-id="542" data-date="03/02/2013" data-type="OfficialHoliday">                                         
           <span class="date-text">02/Mar/2013</span>
          <img alt="close icon" class="date-close-icon" src="/Content/Images/x_icon.png">
        </li>

这将在浏览器中显示：

我不明白为什么它们看起来不同（请注意第一张图片中日期文字和x图标之间的差距），根据我的样式表，第二张图片是正确的....但是为什么第一张看起来不一样他们有相同的HTML和CSS ???

顺便说一下，这是我的样式表（.date-text没有应用stlyes）：

.date-label
{
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #aaa;
    border-color: rgba(0, 0, 0, 0.3);
    background: #fff;
    color: rgba(0, 0, 0, 0.8);
    font-size: 16px;
    font-weight: normal;
    display: inline-block;
    line-height: 1.3;
    padding: 1px 0px 1px 0px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%; 
    margin:0px 5px 0px 0px;
    box-shadow: 1px 1px 1px #555555;
    -moz-box-shadow: 1px 1px 1px #555555;
}

.date-close-icon
{
    height:11px;
    width:11px;
    cursor:pointer;
}

更新：

这是HTML回车的问题，请参阅Aleksandr M的回答中的链接以获取更多详细信息！

Answer 1

如果你想要它没有差距，只需在li内写回代码而不用回车符

foreach (var item in Model.OfficialHolidaysViewModel.OfficialHolidaysForCurrentYear) 
{
   <li class="date-label"  data-id=@item.OfficialHolidayID data-date=@item.ShortDateString data-type="OfficialHoliday">
      <span class=date-text>@item.ShortDateString</span><img alt="close icon" class="date-close-icon" src="/Content/Images/x_icon.png" />
   </li>
}

请参阅此链接：http://www.netmechanic.com/news/vol1/html_no3.htm

  

理论上，HTML不会关注源文档中的空白区域。实际上，您的浏览器会将回车解释为空白的单个字符。

Answer 2

您的问题似乎是由换行符（在渲染的html文档中插入空格）引起的。如果你不需要那个空格而不是那两个元素那么你可以将这些元素浮动到左边，它会忽略空间。