HTML INPUT 标记未从 FORM 继承 CSS答案

【问题标题】：HTML INPUT tag not inheriting CSS from FORMHTML INPUT 标记未从 FORM 继承 CSS
【发布时间】：2014-12-07 17:06:51
【问题描述】：

我有一些 HTML 表单。我正在使用表格。我正在将 png 叠加在提交按钮上。

在示例 A 中，下面的 CSS 有效。在示例 B 中它没有。我检查了 CSS 调试器，问题似乎是 INPUT 字段没有从 FORM 继承，当它被 TR 或 TD 标签与它分开时。大概应该有一种方法可以在 CSS 中静态地重新定义这种继承。谁能指出正确的解决方案？

在这种特殊情况下，表的使用是一个约束。

示例 A：

<TABLE class="navbutton">
<TR class="navbutton"><TD class="navbutton">
   <form method="post" action="/AdminPalette" enctype="application/x-www-form-urlencoded">
   <input type="submit" name="add" value="add" class="add" />
</TD><TR>
</form>

示例 B：

<TABLE class="navbutton">
   <form method="post" action="/AdminPalette" enctype="application/x-www-form-urlencoded">
<TR class="navbutton"><TD class="navbutton">
   <input type="submit" name="add" value="add" class="add" />
</TD><TR>
</form>

示例 CSS：

form input[type=submit].add {
	width : 32px;
	height :32px;
	border : none;
	color : transparent;
	font-size : 0;
        cursor: pointer;
}

form input[type=submit].add {
	background : url("/Art/GCON/green/add-item.png") no-repeat center center;
}

【问题讨论】：

您的 HTML 无效。将表单标签放在桌子周围或一个单元格内。您不能将其作为表格或单元格的子项开始，并在表格之外结束。

标签： html css forms html-table

【解决方案1】：

这与继承无关。

您的 HTML 无效。使用a validator。

表格可以包含在表格中。表格可以包含在表格单元格中。表单不能是表格（或表格行、表格主体、表格页眉或表格页脚）的子元素。

您的浏览器通过将表单放在表格之后进行纠错（但将输入留在后面）。

【讨论】：