由图形化按钮引出的相关hack

原文转自 小麦 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，鼠标不改变，也不会觉得奇怪。但是如果按钮没有突起感，鼠标移上之后不变形，就会感觉是不可点。