Div Table布局下Input与Textarea底部边框无法对齐问题求助

出现边框对齐问题的核心原因是：

• 浏览器对<input>和<textarea>的默认样式差异：包括默认内边距、行高、垂直对齐方式，以及textarea设置rows="1"时的内部布局逻辑，导致两个元素的底部边框位置不一致。
• 盒模型计算不一致：未统一设置box-sizing: border-box，元素宽度计算是否包含padding的差异间接影响边框位置。
• table-cell的vertical-align: middle与表单元素自身对齐规则冲突，放大了跨浏览器布局差异。

通过统一表单元素样式、重置默认差异、调整对齐规则解决问题：

修改后的CSS代码 #

* {
  /* 全局统一盒模型，避免宽度计算偏差 */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.DivTab {
  display: table;
  width: 100%;
  color: #ffffff;
  background-color: #000000;
}

.DivTabBody {
  display: table-row-group;
}

.DivTabRow {
  display: table-row;
  background-color: #000000;
}

.DivTabCell {
  display: table-cell;
  /* 改用baseline对齐，确保表单元素基线统一 */
  vertical-align: baseline;
  text-align: start;
  padding-top: 0;
  padding-bottom: 0;
  color: #cfd0ce;
  background-color: #000000;
}

/* 给右侧单元格加左内边距，替代textarea的margin-left */
.DivTabCell:last-child {
  padding-left: 5px;
}

.KeyClass {
  background-color: #000000;
  color: #ffffff;
  padding: 0 5px;
  border: none;
  border-bottom: solid #ffffff 1px;
  width: 100%;
  font-family: Consolas;
  /* 统一行高和垂直对齐 */
  line-height: 1.5;
  vertical-align: bottom;
}

.ValueClass {
  background-color: #000000;
  color: #ffffff;
  padding: 0 5px;
  border: none;
  border-bottom: solid #ffffff 1px;
  resize: none;
  width: 100%;
  font-family: Consolas;
  overflow-y: hidden;
  /* 统一行高和垂直对齐 */
  line-height: 1.5;
  vertical-align: bottom;
  /* 重置textarea默认样式，避免浏览器差异 */
  min-height: auto;
}

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Alignment example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Input and Textarea align example">
  <link rel="stylesheet" href="styles.css">
</head>

<body style="background-color: #000000;">
  <div style="width: 60%;">
    <div class="DivTab">
      <div class="DivTabBody">
        <div class="DivTabRow">
          <div class="DivTabCell" style="width: 30%;">
            <input id="paramKey" type="text" class="KeyClass">
          </div>
          <div class="DivTabCell" style="width: 70%;">
            <!-- 移除rows="1"，通过CSS控制高度 -->
            <textarea id="paramValue" spellcheck="false" class="ValueClass"></textarea>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

关键修复点说明 #

• 全局盒模型统一：用*选择器设置box-sizing: border-box，确保所有元素宽度计算包含padding和border，避免布局偏移。
• 对齐规则统一：将table-cell的vertical-align改为baseline，同时给两个表单元素设置vertical-align: bottom，确保底部边框处于同一水平线。
• 重置默认样式：移除textarea的rows="1"，改用CSSline-height控制高度，避免浏览器对单行textarea的特殊布局处理；把textarea的margin-left移到父单元格的padding-left，避免影响元素自身布局流。
• 统一表单元素样式：确保input和textarea的padding、line-height、字体完全一致，消除跨浏览器默认样式差异。

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