应用于表格单元格中的 HTML 输入元素的 CSS 背景属性答案

【问题标题】：CSS background property applied to HTML Input element within Table cell应用于表格单元格中的 HTML 输入元素的 CSS 背景属性
【发布时间】：2015-08-23 11:38:36
【问题描述】：

JSFiddle

当您将鼠标悬停在表格中的输入字段上时，整个单元格将变为灰色，顶部的几个像素除外。这是为什么？我尝试将我能想到的所有内容（边距、填充、框阴影等）设置为 0 或 none，但无济于事。

【问题讨论】：

td { line-height: 100% }。输入中文本的大小与表格单元格的高度不匹配。在单元格本身上设置line-height: 100% 可以解决此问题
@MarcB：最佳解决方案！投票。问候。

标签： html css background html-table html-input

【解决方案1】：

考虑更改您的 CSS 以检查 td:hover 而不是 input:hover。

代替：

td input:hover {
    background-color: #8d8d8d;
}

td input {
    width: 100%;
    border: 0;
}

尝试：

td input {
    width: 100%;
    border: 0;
}

td:hover, td:hover input {
    background-color: #8d8d8d;
}

JSFiddle

【讨论】：

【解决方案2】：

您没有在输入字段上定义高度，因此它小于包含的 td

td input {
     height:20px;
}

http://jsfiddle.net/oe2ofup6/2/

【讨论】：