如何从Safari中输入元素的值部分删除奇数边框？

Question

如果您看一下这张图片 - http://twitpic.com/q0a6p - 您可以看到一个奇怪的问题，其中包含表单中输入标记的文本元素的轮廓。 （在右边，Safari的网络检查员正在检查它）。背景是按钮的图像。该问题仅发生在Safari中。 FF和IE很好。有谁知道是什么导致它？

<input type='image'  id='product_114' class='buy_button' name='Buy' value='Add To Cart'  />

我已对输入元素应用border：none！important，但轮廓仍然显示（仅在Safari中）。它似乎概述了输入元素的值部分，但我不确定如何设置它。

Answer 1

<input type="image">元素有更多警告。例如，在IE中，您不会收到buy作为参数名称，而是buy.x和buy.y。

<input type="image">仅用于展示某种地图，其中最终用户可以指定特定位置。

但你不想这样做。您只需要一个带有背景图像的提交按钮。因此，我建议将<input type="submit">替换为设置为background-image的CSS url(path/to/your/image.png)。

关于大纲：这更多是背景位置的问题。

Answer 2

这是“图像”类型的输入，您不需要为其添加值属性，而是使用alt属性。 另外，我没有看到src属性。

您的输入应该更像：

<input type='image'  src='path/to/your/image.png' id='product_114' class='buy_button' name='Buy' alt='Add To Cart'  />

您也可以使用jquery自定义链接：

HTML：

<form id="my-form">
  <a href="#" id="submit-link"/>
</form>

Javascript（jQuery）：

$(#submit-link").click(function(e){
  e.preventDefault();
  $("#my-form").submit();
});