javascript - 动态加载的元素与静态元素不同，尽管它们具有相同的 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>')

这得到了正确的参数化，结果是 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 没有应用样式):

.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

In theory HTML doesn't pay attention to white space within your source document. In practice, your browser will interpret a carriage return as a single character of white space.