没有表单的按钮在 Firefox 中看起来很糟糕答案

【问题标题】：Button without form looks bad in Firefox没有表单的按钮在 Firefox 中看起来很糟糕
【发布时间】：2011-12-06 19:49:09
【问题描述】：

我有一个与表单本身无关的按钮，但基本上仅用作超链接。它在 Chrome 和 Safari 中看起来不错，但在 Firefox 中，它后面有一条难看的额外线。

（上面的灰线是故意的，后面的粗线是我想去掉的）

我的 HTML 模板中有以下内容（它是 Django，但这并不重要）：

<p class="submitrow"><form><a href="{% url events_create_event %}"><input type="submit" name="delete" value="Create New Event" /></form></p>

去掉标签不会改变任何事情。

如何让我的按钮在 Firefox 中也看起来正常？

谢谢！

【问题讨论】：

如果你是一个超链接，为什么还要使用按钮？
显示与按钮（和周围）关联的 CSS 可能很有用。
获取 webdeveloper 工具栏插件，并使用它的 css-> 视图样式信息来找出导致该行呈现的原因：chrispederick.com/work/web-developer 也许表单是样式化的？

【解决方案1】：

您似乎需要在a 上使用text-decoration: none。

另外，<input> 不能包含在 <a>-it's invalid HTML 中。

此外，您缺少</a>，并且您不能在<p> 中包含<form>。

基本上，整理出无效的 HTML，问题就会自行解决。

【讨论】：