有時候版面設計會把按鈕作成圖片、而且讓造型上跟輸入欄結合在一起。這時候我通常會用比較偷懶的方法：把輸入欄、按鈕切成同一張圖。然後把輸入欄跟按鈕的input用隱形的方式壓在圖片上。
輸入欄的部份隱形沒有問題，但是input按鈕隱形的時候，在IE6會有問題，最近剛好碰到兩次，寫一下原本的作法跟解決方法。
如果不考慮IE6，IE7以上以及非IE瀏覽器可以用下面這段css把input變成隱形按鈕
<input type=”submit” name=”button” id=”button” value=”送出” />
#button{
width:10px; // 因為要隱形、要自訂寬
height:10px; // 因為要隱形、要自訂高
text-indent:-300px; //讓按鈕裡面的字超出按鈕範圍之外
overflow:hidden; //將超出範圍的字隱藏
border:none; //把按鈕框隱藏
background:transparent; //把背景變透明
}
但是在IE6下，只要把按鈕背景變透明，就只有按到字的時候，才能按到按鈕，偏偏我又設定把字也隱藏了，所以根本按不到。這個時候有兩種解法
解法一：把原本放input的位子改成放一張透明的gif，在該gif上下超連結
解法二：把<input type=”submit” name=”button” id=”button” value=”送出” />改成<input type=”image” src=”透明圖片gif的路徑” name=”button” id=”button” value=”送出” />
我第二次遇到的時候實際上還碰到另外一個狀況，就是該父元素的bg是用png，在ie6底下用fliter的方式修復。但是造成按鈕無法按，父元素加了position:relative;還是無效。所以後來只好針對ie6用gif圖檔背景，然後配合上述修改才處理掉按鈕在ie6無法按到的問題。