样式化的 HTML 提交按钮无法响应返回键答案

【问题标题】：Styled HTML Submit button fails to respond to Return Key样式化的 HTML 提交按钮无法响应返回键
【发布时间】：2009-11-25 00:26:06
【问题描述】：

我有一个简单的 HTML 表单，因此：

<form>
    <p>
        <input type="text" name="text" />
    </p>
    <p class="buttonPara">
        <input type="submit" name="submit" />
    </p>
</form>

还有一个简单的样式表，因此：

p.buttonPara
{
    position: relative;
}
p.buttonPara input
{
    position: absolute;
    left: 50px;
}

提交按钮无法响应返回键，除非我从

<p class="buttonPara">

有什么想法吗？

【问题讨论】：

您在哪个浏览器中看到这种行为？
即使您将鼠标按下按钮，移开按钮，鼠标向上然后按回车，它是否也会失败？
对不起，我应该说（你可能已经猜到了）- IE8。它适用于 Firefox。
焦点是否在表单区域内？
当我的光标位于文本框中时它会失败，而当光标在按钮上时它可以正常工作。

标签： html internet-explorer

【解决方案1】：

我不确定您想要完成什么以及为什么采用这种方法。是否要将上方文本字段中间的按钮对齐？

您可以在不定位按钮元素的情况下执行此操作。但这意味着将所有内容包装在一个容器元素中，并设置该元素的宽度以及 text-align 属性。或者您当然可以设置表单的宽度和对齐属性。

【讨论】：

我的网站是完全“可访问”的，按钮图形对用户来说是可选的。 “buttonPara”也有一个背景图像，按钮向右移动以适应它。那些选择不看图形的用户根本没有得到样式表链接，所以按钮出现在它的正常位置。总而言之，这不是我要解决的问题。
那么，在这种情况下，为什么不将表单的宽度或提交按钮周围的包装 div 设置为所需的值，并将该元素的“text-align”属性设置为“right” " 在加载样式表的场景中。因为解决由您的方法触发的 IE8 错误可能需要一些 JavaScript 黑客攻击。这将使禁用 JavaScript 的 IE8 用户望而却步。

【解决方案2】：

我解决了。

我的 form 包含在 div 中，它的 class 由 body onload 事件以编程方式设置。在设置 class 之前，div 的基本样式为 display:none。在 IE 中，结果是按回车键不提交表单。

【讨论】：