卡片点击编辑添加box-shadow后向上偏移的原因排查求助

嘿，我来帮你搞定这个卡片点击编辑时的偏移问题！先拆解下问题的根源，再给你一步步的解决方案：

问题到底出在哪？ #

1. inline-block的垂直对齐坑：你用了inline-block布局卡片和内部元素，但它默认的vertical-align: baseline会随着元素内部内容的变化（比如隐藏标题显示输入框）改变基线位置，导致卡片整体偏移。
2. display类型频繁切换：编辑状态切换时，你在table-cell和inline-block/block之间来回切，不同布局模型的计算规则差异会触发浏览器重排，让卡片位置跳来跳去。
3. 边框与尺寸的隐性变化：虽然你给.card加了透明边框，但部分浏览器对透明边框的渲染可能有细微差异，加上box-shadow的叠加，偶尔会触发布局偏移（不过这不是主要原因）。

具体修复方案 #

1. 给inline-block元素固定垂直对齐

先把所有inline-block元素的vertical-align设为top，彻底解决基线对齐导致的偏移：

.card-cell {
  display: inline-block;
  width: calc(100% / 6 - 20px);
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: 16px;
  vertical-align: top; /* 新增：固定顶部对齐 */
}

.card .content .title,
.card .content .input,
.card .content .action {
  vertical-align: top; /* 新增：内部元素也固定顶部对齐 */
}

2. 用Flex布局替代混合display类型

放弃混用table-cell和inline-block，改用Flex布局来实现卡片内部的标题与操作区排列，布局更稳定，切换状态时也不会触发大的重排：

修改.card .content及相关元素的CSS：

.card .content {
  display: flex; /* 替换原来的block */
  width: 100%;
  height: 100%; /* 确保占满卡片高度 */
}

.card .content .title,
.card .content .input-group {
  flex: 1; /* 让标题/输入组自动占满剩余空间 */
  padding: 24px 0 24px 24px;
  font-size: 16px;
  color: #333;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中内容 */
}

.card .content .action,
.card .content .action-edit {
  width: auto; /* 去掉固定宽度，让内容决定 */
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中图标 */
  border-left: solid 1px #c4c4c4; /* 把action-edit的border移到这里，统一样式 */
}

/* 用类控制显示隐藏，不再用JS直接改display */
.card .content .action-edit,
.card .content .input-group {
  display: none;
}

.card.edit .content .title,
.card.edit .content .action {
  display: none;
}

.card.edit .content .action-edit,
.card.edit .content .input-group {
  display: flex;
}

3. 锁定卡片尺寸，避免意外变化

给.card加上box-sizing: border-box，确保边框和内边距不会改变卡片的整体尺寸：

.card {
  width: 100%;
  height: 70px;
  border-radius: 3px;
  background-color: #F8f8f8;
  box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
  font-size: 16px;
  cursor: pointer;
  border: solid 1px transparent;
  box-sizing: border-box; /* 新增：边框内缩，不影响整体尺寸 */
}

4. 简化JS逻辑，减少直接操作样式

把JS里直接修改display的代码去掉，改用添加/移除.edit类来控制显示隐藏，代码更简洁也更可靠：

// 点击编辑按钮进入编辑状态
$(".action").click(function() {
  const thisCard = $(this).closest(".card"); // 用closest代替多次parent()，更鲁棒
  thisCard.addClass("edit");
  
  // 填充输入框内容
  if (thisCard.find(".input-sub-line").length === 0) {
    thisCard.find(".input-main").val(thisCard.find(".title").text());
  } else {
    thisCard.find(".input-main").val(thisCard.find(".title-main").text());
    thisCard.find(".input-sub").val(thisCard.find(".title-sub").text());
  }
  
  thisCard.find(".input-main").focus();
  thisCard.removeClass("clicked");
});

// 保存或取消编辑
$(".check, .cancel").click(function() {
  const thisCard = $(this).closest(".card");
  thisCard.removeClass("edit");
  
  // 仅保存按钮触发内容更新
  if ($(this).hasClass("check")) {
    if (thisCard.find(".input-sub-line").length === 0) {
      thisCard.find(".title").text(thisCard.find(".input-main").val());
    } else {
      thisCard.find(".title-main").text(thisCard.find(".input-main").val());
      thisCard.find(".title-sub").text(thisCard.find(".input-sub").val());
    }
  }
  
  thisCard.removeClass("clicked");
});

额外小优化 #

• 删掉.action里的float: right，Flex布局已经能完美实现右侧对齐，float容易引发布局混乱。
• 给.input-group也加上box-sizing: border-box，确保输入框的内边距不会超出容器。

这样修改后，卡片的布局会稳定很多，切换编辑状态时再也不会出现偏移和跳动的问题，代码也更易维护啦！

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