1

タグを含む div があります (stackoverflow のタグ機能など)。ajax を使用して、この外側の div に新しいタグを追加します。新しく追加されたタグに約 5px の左マージンまたはパディングが追加されることを除いて、すべて正常に動作します。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;
});
});

dataphp スクリプトが正常に完了すると返されるは、他の.ajax()タグのようになります。

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

新しく「ajaxed」されたタグには、この不要な左マージンまたはパディングが常にあります。ページを更新すると、このマージンはなくなります。なぜこれが起こっているのかについてのアイデアはありますか?

4

2 に答える 2

1

ほとんどの場合、これは単なる空白であり、得られる HTML の回答は追加の空白文字で始まります。それらをすべて削除すると、動作するはずです（demo）：

動作デモのスクリーンショット

于 2013-05-06T02:13:36.880 に答える