为什么父填充不适用于子div

Question

我遇到的问题是子div不受其父级填充的影响。问题似乎只出现在Firefox中。它在Chrome中完美运行。无论应用了多少填充，子div都会与父级的填充重叠。

正在动态实例化子div。父div在HTML文件中编码。子div被插入chat-message-box

HTML：

<div id='chat-messages'>
    <div class='chat-message-box'>
    </div>
</div>

CSS：

.user-msg-me
{
    float: left;
    min-width: 100px;
    margin: 10px 80px 0 5px;
    padding: 3px 10px 3px 10px;
}

.user-msg-me-continued
{
    float: left;
    min-width: 100px;
    margin: 1px 80px 0 5px;
    padding: 3px 10px 3px 10px;
}
.chat-message-box {
    width: 100%;
    height: 90%;
    padding: 10px;
    overflow-y: scroll;
    word-wrap: break-word;
    box-sizing: border-box;
    border: 1px solid #2bda9e;
}

插入HTML：

<div class="user-msg-general">
    <span class="user-msg-me-continued me">
        my message is here
    </span>
</div>

使用JQuery插入：

    $.ajax({
        url: 'php/submitMsg.php',
        data: {'msg': msg},
        type: 'post',
        dataType: 'json',
        success: function(success, data){
            $('.chat-message-box').append(success['html']);
            $('.me').last().text(success['message']);
        },
        error: function(error, data){
            $('.chat-message-box').append(error);
        }
    });

令人讨厌的是，如前所述，它适用于Chrome，但在Firefox中不起作用。我尝试使用-moz前缀来查看css，但这似乎不起作用。我可能正在做一些非常愚蠢的插入文本。

提前致谢