HTML5移动端模拟聊天应用Div消息背景尺寸随机异常问题求解

问题根因 #

你遇到的移动端随机尺寸异常是fit-content属性的兼容性问题导致的：

• PC端现代浏览器对fit-content的布局计算支持完善，而移动端大量旧版Webkit内核浏览器（包括微信、手机厂商自带浏览器）对动态插入DOM场景下的fit-content宽度计算存在bug，会出现宽度计算值小于实际内容宽度的情况，就会触发背景尺寸不足、内容溢出、异常换行的问题。
• 你设置的block-size: fit-content进一步干扰了浏览器的高度计算逻辑，放大了布局异常的概率。

修复方案 #

1. 替换兼容性差的fit-content实现 #

将.message的布局规则替换为兼容性更好的flex对齐方案，修改对应CSS：

/* 调整消息父容器为flex列布局，方便子元素左右对齐 */
#chat-history .container {
    display: flex;
    flex-direction: column;
}

.message {
    padding: 0.5rem;
    background-color: #F7F4EA;
    margin-bottom: 0.7rem;
    /* 删掉原来的width: fit-content、block-size: fit-content */
    max-width: min(70%, 40rem);
    border-radius: 10px;
    position: relative;
    display: inline-block; /* 由内容自动撑开宽度，全平台兼容性好 */
}

/* 调整消息对齐规则，替换原来的margin左右自动实现 */
.you {
    align-self: flex-end;
    background-color: #99D6FF;
}
.they {
    align-self: flex-start;
    background-color: #F7F4EA;
}

2. 增加文本换行约束，避免溢出 #

给消息内的p标签增加宽度继承和换行规则：

.message p {
    width: 100%;
    margin: 0;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

3. 动态插入DOM后强制触发重排 #

在showMessage函数中插入消息后，主动触发浏览器布局重计算，避免延迟计算导致的异常：

function showMessage(bThem, msgID){
    if (bThem) {
        $("#typing").addClass("hidden");
        $("#typing").before(msgTheyHead + theirMessages[msgID] + msgEnd);
    } else {
        $("#typing").before(msgYouHead + yourMessages[msgID] + msgEnd);
    }
    // 新增：主动触发浏览器重排
    void window.getComputedStyle($("#chat-history")[0]).height;
    scrollToLatest();
}

可选兼容方案 #

如果要保留fit-content写法，需要补充前缀兼容：

.message {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

内容的提问来源于stack exchange，提问作者nomadDev