Android WebView中HTML图片定位异常：图片覆盖消息的CSS修复

嘿，这个问题我之前在适配WebView聊天界面时也碰到过——桌面浏览器渲染正常，到了Android WebView里元素就乱跳重叠。核心问题在于原来的布局依赖inline-block，而WebView的渲染引擎对inline-block的间距、对齐处理和桌面浏览器有差异，导致图片和消息块挤在了一起。

咱们直接改CSS就能搞定，具体调整如下：

需要修改的CSS规则 #

1. 重构.incoming_msg的布局 #

把原来的.incoming_msg改成flex布局，这是目前移动端最可靠的横向排列方案：

.incoming_msg {
  display: flex;
  align-items: center; /* 让图片和消息垂直居中，视觉更舒适 */
  margin: 1% 0 3%; /* 把.received_withd_msg的margin移到这里，统一控制消息行的间距 */
}

2. 调整图片和消息容器的宽度与对齐 #

原来的inline-block相关属性可以去掉，重新设置宽度避免溢出：

.incoming_msg_img {
  /* 去掉display: inline-block */
  width: 8%; /* 稍微调宽一点，避免图片太小，你可以根据需求调整 */
  margin-right: 2%; /* 给图片和消息之间加个间隙 */
}

.received_msg {
  /* 去掉display: inline-block和vertical-align: top */
  width: 90%; /* 图片+消息+间隙总和控制在100%以内 */
}

/* 把.received_withd_msg的margin去掉，因为已经在.incoming_msg里设置了 */
.received_withd_msg {
  width: 45%;
  margin: 0; /* 修改这里 */
}

3. （可选）优化图片的显示 #

给图片加个圆角和固定宽高，让头像样式更统一：

.incoming_msg_img img {
  width: 100%;
  border-radius: 50%; /* 圆形头像效果 */
  aspect-ratio: 1/1; /* 保证图片是正方形 */
}

修改后的完整CSS代码 #

替换你原来的<style>标签内容即可：

.container {
  max-width: 100%;
  margin: auto;
}

img {
  max-width: 100%;
}

.inbox_msg {
  clear: both;
  overflow: hidden;
}

.recent_heading {
  float: left;
  width: 40%;
}

.incoming_msg {
  display: flex;
  align-items: center;
  margin: 1% 0 3%;
}

.incoming_msg_img {
  width: 8%;
  margin-right: 2%;
}

.incoming_msg_img img {
  width: 100%;
  border-radius: 50%;
  aspect-ratio: 1/1;
}

.received_msg {
  width: 90%;
}

.received_withd_msg p {
  background: #ebebeb none repeat scroll 0 0;
  border-radius: 1%;
  color: #646464;
  font-size: 14px;
  margin: 0;
  padding: 1% 1% 1% 2%;
  width: 100%;
}

.time_date {
  color: #747474;
  display: block;
  font-size: 12px;
  margin: 2% 0 0;
}

.received_withd_msg {
  width: 45%;
  margin: 0;
}

.mesgs {
  float: left;
  padding: 1% 1% 0 2%;
  width: 100%;
}

.sent_msg p {
  background: #05728f none repeat scroll 0 0;
  font-size: 14px;
  margin: 0;
  color: #fff;
  padding: 1% 2% 1% 2%;
  width: 100%;
}

.outgoing_msg {
  overflow: hidden;
  margin: 1% 0 2%;
}

.sent_msg {
  float: right;
  width: 46%;
}

为什么这些修改有效？ #

• Flex布局是现代浏览器（包括WebView）支持很好的布局模式，它能精确控制子元素的排列方向、对齐方式，不会出现inline-block的间距bug。
• 统一把消息行的margin放在.incoming_msg上，避免多层margin叠加导致的布局混乱。
• 调整宽度比例并添加间隙，确保图片和消息块不会因为宽度溢出而重叠。

最后提醒下：确保你的WebView已经开启了JavaScript（如果依赖的话），并且viewport设置正确（你原来的<meta name=viewport content=width=device-width, initial-scale=1>是对的）。

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