网页制作图文混合按钮

　　在网页上，生成按钮有三种方法（用<a></a>等元素变换样式模拟按钮不计在内），
　　一是，<input type="button" value="按钮"/>，可以得到纯文字按钮；
　　二是，<input type="image" src="pic.gif"/>，可以得到纯图片按钮（按钮的外观完全依赖于图片。按钮点击会导致表单提交，要做点处理，见最后）；
　　三是，<button>按钮</button>。

　　最后一种要灵活得多，可以方便的生成图文混合的按钮(其中图片为16*16的，文字为12px)，不用费力的把图标与文字做成一个图片。如：
　　<button><img src="images/magnifier.pgn"/>按钮</button>
　　此时，如果不进行任何控制，按钮会变高。
　　只要加上 align="absmiddle"就可以了。
　　<button><img src="images/magnifier.pgn" align="absmiddle"/>按钮</button>

　　如果你有大量的这种按钮，可以通过样式统一来控制：
  button img{
  vertical-align:middle;
  }
　　如果不喜欢按钮前后留白太大，可以用padding控制一下。

　　这种方式，在FF下，带文字的按钮与不带文字的按钮垂直方向上差一个像素，很奇怪，如果有人知道如何解决请告诉我。

IE：


FF：


　　另：<button></button>生成的按钮，在IE7中、IE8中有不同的行为，微软真是有点让人痛恨。IE7下，只是个普通的按钮；而IE8下，这个按钮如果在表单中，点击时会导致表单提交。如果只想做点处理，而不想提交表单，可以在按钮事件处理函数中return false。