原文转自 小麦 http://www.mikkolee.com/73
图形化按钮，就类似这个样子的：
当然，它其实就是一张图片而已。这样做纯粹是为了好看。这里探讨的不是怎么设计这种按钮，而是怎么在网页里把它做出来。这里要提几个要求：
A. 语义化。如果这个按钮叫“完成注册”，就要在HTML中写出这四个字，以保证只读HTML的情况下也知道这个按钮是什么文字。
B. display:inline。用display:block可以很容易的调整大小。但是如果一横排并列两个按钮，就比较难解决。用float?不好。万一我需要两个按钮并排，且居中，用float会增加更多额外的代码。
C.理所当然，跨平台兼容性。所以inline-block的想法，在IE6上就行不通。
有几种方法可以做这种按钮：
1. 用image类型的input标签，或是button标签。这样做最大的问题是，必须在HTML里引用图片地址。我个人是倾向于不要将修饰图片地址放在HTML代码里。结构和表现要分离嘛。此外，用button环绕img，你会惹一堆布局上的麻烦。
2. 用a标签，CSS加背景。这种方法挺容易。但是有几个问题：
a) 对inline的a标签设置高宽，你会遇到一堆麻烦事儿。
b) 此外，为了达到要求A，需要在a里面写入文字，并且将文字隐藏掉。这里如果用text-indent的话，就不能用inline了。另外一个方法是 vertical-align，但是，这个属性基本上被我废止。原因是vista里，用微软雅黑及vertical-align，你会遇到很可怕的事情 。记住要求C：跨平台兼容性。
c) 用a标签，你还得写JS来提交表单，麻烦。
3. a标签环绕图片。这个同样不是太好，理由在1和2里都有讲。（但它倒是可以满足要求B：display:inline）
4. 用buton类型的input，加CSS背景。这种方法看上去是可以满足要求A和B。关键的问题是：在保证跨平台兼容性的同时，如何隐藏掉button的文字。
我这里给出一个比较好的方法：
input {border:none;width:120px;height:24px;background:url(http://www.mikkolee.com/blog/wp-content/uploads/2008/11/login.png) no-repeat 0 0;text-indent:-3000px;overflow:hidden;cursor:pointer;
}
* input {*text-indent: 0;*padding:0 0 0 120px;} /*hacked for IE*/
解释一下：在FF3和Chrome中，将按钮的text-indent设为-3000px，就可以将文字隐藏。但同样的设置在IE下，会导致按钮本身也跟着跑到-3000px的位置去，除非按钮被声明为display:block（但这就不满足要求B了）。
对此有一个巧妙的解决办法：首先用hack在IE里将text-indent恢复。然后再将左padding设置成120px，和width一样。这个方法之所以很妙，是因为按钮是唯一一个不遵守盒模型的元素 ，无论在哪个浏览器下。所以将左padding设为和width一样宽，会将真正的文字空间压缩到0！。
但是这个解决办法在FF中却会有问题。原因是，即使文字空间压缩到0，FF仍然会将文字显示出来，而不受overflow的影响（事实上这样处理是符合标准的，理由自己思考一下）。所以仍然要写text-indent。
还有一个问题是，在Opera里，左padding要设为差不多180才能将文字隐藏。原因不详。至少我用的9.2版本是如此。所以上面的代码在Opera中并不兼容，需要再单独为Opera做hack。
还有一层更深入的思考：那为啥不就将padding: 0 0 0 180px以正常的形式写到CSS中呢？这个就作为思考题啦，提示一下，180px会对FF造成不利影响。
综上呢，我给的代码是多一不可，缺一不可的（当然，我没写对Opera的变态hack，因为这家伙已经开始背叛标准了，而且不同版本之间兼容性很差，所以放弃掉它）。
此外还可以补充一下，cursor:pointer是为了增强可用性。这是个很奇怪UX问题，如果是正常的button，鼠标不改变，也不会觉得奇怪。但是如果按钮没有突起感，鼠标移上之后不变形，就会感觉是不可点。
