jquery - 为什么 jQuery append() 向 "ajaxed"数据添加左边距/填充？

Question

我有一个包含标签的 div(就像 stackoverflow 上的标签功能)。我使用 ajax 将新标签 append 到这个外部 div。一切正常，除了有一个额外的左边距或大约 5px 的填充添加到新 append 的标签。当我检查 html 时，没有列出边距或填充，但它确实存在。同样的事情也发生在 Chrome、Firefox、Safari 和 Opera 中。这是我的代码:

HTML:

<div class="tags_wrap">
    <div class="tag">
        <div class="tag_wrap">Tag 3</div>
    </div>
    <div class="tag">
        <div class="tag_wrap">Tag 2</div>
    </div>
    ...
</div>

CSS:

.tags_wrap {
    margin:1px 7px 5px 0px;
    float:left;
    text-align:left !important;
}

.tag {
    padding:0;
    margin:4px 7px 0 0;
    border: 1px solid #094C7C;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    background-color:#fff;
    color:#000;
    position:relative;
    display:inline-block;
    font-size:12px;
}

.tag_wrap {
    position:relative;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    border-top: 1px solid #1C7ABF;
    border-right: 1px solid #1C7ABF;
    border-bottom: 1px solid #1C7ABF;
    border-left: 1px solid #1C7ABF;
}

jQuery:

$(document).ready(function(){
    $('form#addSomeTags').unbind('submit').bind('submit',function() {
        var newTag = $("form#addSomeTags > input[name=tagField]").val();
        $.ajax({
            type: "POST",
            url: 'add_tag.php',
            dataType: 'html',
            data: {tag:newTag},
            success: function(data){
                $('.tags_wrap').append(data);
                }
            }
        });
        return false;
});
});

成功完成我的 php 脚本后返回到 .ajax() 的 data 将看起来像其他标签:

<div class="tag">
    <div class="tag_wrap">Tag 2</div>
</div>

在新的“ajaxed”标签上总是有这种不需要的左边距或填充。如果我刷新页面，那么这个边距就不再存在了。关于为什么会发生这种情况的任何想法？

Answer 1

很可能，这只是空格，您获得的 HTML 答案以额外的空格字符开头。当您删除所有这些时，它应该可以工作(demo):