CSS图像按钮不正确答案

【问题标题】：CSS image button not rightCSS图像按钮不正确
【发布时间】：2010-11-11 21:26:16
【问题描述】：

去这个标签：

<a href="javascript:{}" onclick="document.getElementById('_paypal').submit(); return false;"><span id="order_now_btn">Order Now</span></a>

这是 CSS：

#order_now_btn {
  background: transparent url("../images/order_now_btn.gif") 0 0px no-repeat;
  height: 33px;
  width: 111px;
  display: block;
  font-family:Verdana, Arial, Helvetica, sans-serif; 
  font-size:12px;
  font-weight: bold;
  cursor:pointer;
  color: #fff;
}

问题是，我无法将文本放在正确的位置...

这是按钮图片：

有没有更好的方法来做到这一点？我有很多这样的事情要做。

【问题讨论】：

它们是链接还是提交按钮？如果它们是按钮，则应使用或。

标签： css image button

【解决方案1】：

我决定使用按钮标签，效果很好。

<button type="submit" id="order_now_btn" width="111" height="33" align="absmiddle" alt="Order Now" /><span>Order Now</span></button>

#order_now_btn {
  color: #fff;
  background: transparent url("../images/order_now_btn.gif") 0 0px no-repeat;
  border: 0;
  height: 33px;
  width: 111px;
  font-size:12px;
  font-weight: bold;
  cursor:pointer;
  font-family:Verdana, Arial, Helvetica, sans-serif; 
}

#order_now_btn span {
  position: relative;
  left: 12px;
}

【讨论】：

+1 按钮比虚假链接更适合动作。不过，您不需要width、height 或align 属性（无论如何，它们不会对<button> 执行任何操作）。最好使用一个普通的表单提交按钮，这样它就可以在没有启用 JavaScript 的情况下工作。

【解决方案2】：

只需要添加一些填充：

padding:10px 0 0 30px;

http://jsfiddle.net/6fX5v/

【讨论】：

【解决方案3】：

您必须将文本放在图像上方。

检查这些

http://www.the-art-of-web.com/css/textoverimage/

http://frinity.blogspot.com/2008/06/placing-text-over-image-using-css.html

【讨论】：

【解决方案4】：

只需在#order_now_btn 中添加padding-left:30px; 和padding-top:10px;。这会将您的文本放置在正确的位置。

【讨论】：