如何让 IE 7 使用在 html 表单中设置为提交按钮的图像？

Question

我有一个对 php 脚本执行操作的 html 表单。而且我已将提交按钮设置为具有自定义图像，而不是显示为默认的灰色事物。我已经在 chrome 中测试了代码，并且 php 脚本工作正常（意思是，提交按钮成功调用并执行 php 脚本，单击它）。然而，相同的代码在 IE 7 中不起作用。

能否请您告诉我如何让它与 IE 7 一起工作（我需要对 IE 7 的支持）-

代码：

<form action="some_php_script.php" method="post">
<input type="image" src="submit-button.png" name="submit-plus" id="submit-plus" value="submit" />
</form>

在相关说明中，我还有一个问题 - 上面的表格目前引用了“some_php_script.php”。我可以在这个 html 部分中编写一个 php sn-p 以便它可以在脚本 url 中传递一些值，如下所示 -

<form action="some_php_script.php?page=12" method="post">

（基本上，我希望 ?page=12 根据当前页面中的其他值动态传递。）

谢谢！

Answer 1

我不确定您是否为此找到了可靠的解决方案，但我在 IE 7 中遇到了同样的问题。按钮图像在 IE 8+ 中看起来很棒，当然在 Firefox 和 Chrome 中。

您可以将按钮标签保留在其中，如 diEcho 示例中所示，或者您可以使用输入标签返回原始代码。您要做的是添加“背景颜色”样式并将其设置为“透明”。我看到你没有与按钮关联的类，所以你可以在输入标签中创建一个内联样式。

    <form action="some_php_script.php" method="post">
    <input type="image" src="submit-button.png" name="submit-plus" id="submit-plus" value="submit" style="background-color: transparent;" />
    </form>  

试一试！如果您的按钮周围有一个有趣的边框，您可以在您的内联样式中添加一个额外的样式 border: none;。

Answer 2

http://www.w3.org/TR/html4/interact/forms.html#h-17.4.1

image 创建一个图形提交 按钮。 src 属性的值 指定图像的 URI 将装饰按钮。为了 可访问性的原因，作者应该 为图像提供替代文本 通过 alt 属性。

当一个指点 设备用于点击图像， 表单提交并点击 坐标传递给服务器。这 x 值以像素为单位测量 图像的左侧，以及 y 值 图像顶部的像素。这 提交的数据包括name.x=x-value 和 name.y=y-value 其中“name”是 name 属性的值，以及 x-value 和 y-value 是 x 和 y 坐标值。

如果服务器采取不同的行动 根据点击的位置， 非图形浏览器的用户将 处于不利地位。为此原因， 作者应考虑替代 方法：

使用多个提交按钮（每个按钮都有 它自己的图像）代替单个 图形提交按钮。作者可以 使用样式表来控制 这些按钮的位置。用一个 客户端图像映射以及 脚本。

Answer 3

试试

<button type="submit" name="submit-plus" id="submit-plus" value="submit">
  <img src="submit-button.png" alt="submit" title="submit"/>
</button>

Reference