将 textarea 中的文本垂直对齐到普通文本

Question

我正在尝试制作一个表格，其中包含一行中的 2 个单元格，第二个单元格包含 1 行文本区域，以便文本垂直对齐到与第一个单元格中的文本相同的级别： 我注意到，对于 FF 来说足够好的 CSS 在 Chrome 中失败了（实际上，它还取决于浏览器的缩放级别），我需要一种一致的方式来实现这一点。

为了提供 MCVE，我创建了这个 html：

td, td textarea {
	font-family: serif;
	font-size: 15px;
}
table, tr, td, textarea {
	border: none;
}
td {
	padding-left:	0.5em;
	padding-right:	0.5em;
}

<table><tbody><tr>
    <td>text</td>
    <td><textarea>editable text</textarea></td>
</tr></tbody></table>

<script>
// in the real case, this code is inside a handler of the input event
// which is meant to adjust height when the number of lines is changed
var txt = document.querySelector('textarea');
txt.style.height = '1px';
txt.style.height = txt.scrollHeight+'px';
</script>

如您所见，它并没有按预期工作，但也没有那么多 CSS，因此各种填充取决于浏览器。现在，这是我能想到的“修复”这个问题：为单元格指定垂直填充和vertical-align，为 textarea 删除padding-top。以下 sn-p 在单独的 html 中对我很有效：

td, td textarea {
	font-family: serif;
	font-size: 15px;
}
table, tr, td, textarea {
	border: none;
}
td {
	padding: 0 0.5em;
	vertical-align: middle;
}
textarea {
	padding: 0;
}

<table><tbody><tr>
    <td>text</td>
    <td><textarea>editable text</textarea></td>
</tr></tbody></table>

<script>
// in the real case, this code is inside a handler of the input event
// which is meant to adjust height when the number of lines is changed
var txt = document.querySelector('textarea');
txt.style.height = '1px';
txt.style.height = txt.scrollHeight+'px';
</script>

..但它在我的初始上下文中不起作用，并且在 SO sn-p 中也不起作用！对，将 display: block 设置为 textarea 可以在 SO sn-p 中解决此问题：

td, td textarea {
	font-family: serif;
	font-size: 15px;
}
table, tr, td, textarea {
	border: none;
}
td {
	padding: 0 0.5em;
	vertical-align: middle;
}
textarea {
	padding: 0;
	display: block;
}

<table><tbody><tr>
    <td>text</td>
    <td><textarea>editable text</textarea></td>
</tr></tbody></table>

<script>
// in the real case, this code is inside a handler of the input event
// which is meant to adjust height when the number of lines is changed
var txt = document.querySelector('textarea');
txt.style.height = '1px';
txt.style.height = txt.scrollHeight+'px';
</script>

但还是！这在 SO 处提供了完美的对齐（并且垂直“填充”在顶部和底部是相同的）：

但在我原来的情况下，它并不是那么好：

我很困惑，我还能错过什么？

Answer 1

好的，写这篇文章帮助我专注于我尝试过的和没有尝试过的。经过几次迭代（您可以在上面看到）我已经制作了另一个屏幕截图并在textarea 中编辑了文本。 textarea 的高度得到了调整.. 仅此而已：唯一缺少的部分是 textarea 的 height 应该等于它的 scrollHeight，之后对齐是完美的：

万岁！

事实上，由于我的textarea 没有border，所以一旦调整了高度，就不需要vertical-align: middle; 位和无效的单元格垂直填充。

PPS 更好的是：不是取消填充（我在悬停时使用着色背景，所以零填充看起来不太好），input 处理程序可以改进以考虑填充：我的初始处理程序是

var adjustHeightToContent = function()
{
    var defaultHeight = 10;
    var maxHeight = 150;
    jQuery(this).height(defaultHeight); // needed to descrease the height
    jQuery(this).height(Math.min(this.scrollHeight , maxHeight));
};
jQuery('.dataEditor').on('input',adjustHeightToContent);

但是使用this suggestion 我们可以改为：

var adjustHeightToContent = function()
{
    var defaultHeight = 10,
        maxHeight = 150;
    // take padding into account:
    var computedStyle = window.getComputedStyle(this, null),
        paddingTop = computedStyle.getPropertyValue('padding-top'),
        paddingBottom = computedStyle.getPropertyValue('padding-bottom'),
        padding = parseFloat(paddingTop) + parseFloat(paddingBottom);

    jQuery(this).height(defaultHeight); // needed to descrease the height
    var effectiveHeight = this.scrollHeight - padding;
    jQuery(this).height(Math.min(effectiveHeight, maxHeight));
};

这样，也可以使用非零填充。