Chrome与Safari浏览器元素宽度表现不一致问题求助

这个问题我碰到过好多次啦，核心原因是Safari对CSS规范的执行比Chrome更严格——<a>标签默认是行内（inline）元素，而行内元素的width属性在CSS里本来就是不生效的，Chrome可能在某些场景下做了隐式兼容处理，但Safari不会。咱们一步步来修复：

问题根源 #

• <a>是默认的inline元素，这类元素无法通过width属性设置宽度；
• 父容器没有合适的布局规则，两个元素没法正确平分100%宽度；
• 默认的box-sizing: content-box会让padding加到设置的宽度上，导致总宽度超出父容器（比如70%宽度+左右padding，实际宽度会大于70%）。

解决方案 #

我们通过**弹性布局（Flexbox）**让父容器控制子元素的宽度分配，同时让<a>标签变成可设置宽度的块级/行内块元素，还要统一盒模型避免宽度溢出：

修改后的CSS代码 #

/* 父容器设置弹性布局，让子元素自动分配空间 */
.recomment_profile_b_view {
  display: flex;
  gap: 0; /* 可选：不需要元素间间距可设为0 */
}

/* 链接标签改为行内块元素，设置盒模型避免padding影响宽度 */
.rec-p-b {
  display: inline-block; /* 也可以用 display: flex; */
  width: 70%;
  background-color: #fff;
  border-radius: 0;
  padding: 7px 10px;
  box-sizing: border-box; /* 让padding包含在设置的宽度内 */
}

/* 按钮同样设置盒模型，确保宽度计算正确 */
.rec-p-b1 {
  width: 30%;
  background-color: #02020294;
  border: 1px solid #034039;
  border-radius: 0;
  padding: 0 5px;
  box-sizing: border-box;
}

对应的HTML代码（无需修改，保持原结构即可） #

<div class="recomment_profile_b_view">
  <a target="_blank" href="" class="recomment_pro_button rec-p-b">Profile View</a>
  <button class="recomment_button rec-p-b1">
    <img src="images/recommend.png" alt="recomment">
  </button>
</div>

额外优化建议 #

• 如果按钮和链接高度不一致，可以给父容器添加align-items: center;让它们垂直居中；
• 要是需要元素之间有间距，可调整父容器的gap属性（比如gap: 8px），同时把两个元素的宽度改成总和小于100%的值（如68%和30%），避免超出父容器。

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