CSSForm 解決IE6表格錯位問題

現在的網頁模版大多製作得美輪美奐，使用了大量的圖片和CSS，可是在IE6下便顯得錯漏百出，不是跑位了，就是不見了。不論你是網頁設計者還是使用者，相信大家也有在使用時IE6遇到很多的問題。

這次的問題在我製作模版也有遇到過，特意拿出來一說，希望能為各位提供一個解決方法。

如果大家使用CSS直接在text input下加上背景圖，在IE6下如果輸入了太多文字的話，我們便會發現背景圖竟然會跟著文字一起向右跑。現在我來說一說這個問題的解決方法。

這是一個正常的表格代碼。可是如果我們直接加上CSS的話，便會導致在IE6下跑位。

<input type="text" name="author"/>

所以我們要在表格前加上一個<div>包裝著input。並且把背景圖加到<div>上。

<div class="form_author"><input type="text" name="author"/></div>

CSS代碼應該這樣寫。

/* 設定div寬度和高度，和背景圖片。 */
.form_author {
height: 24px;
width: 350px;
margin:5px 0 5px 5px;
background: #fff url(imgs/bg_picture.gif) left top no-repeat;
}
/* 設定被div包著的input背景為透明，沒有邊框。 */
.form_author input {
border: 0;
margin: 5px 0 0 30px;
height: 20px;
width: 130px;
background-color: transparent;
font-size: 12px;
color: #999;
}
/* 當滑鼠移到div上時，背景會往上移，做成不同的效果。 */
.form_author:hover, .form_author:focus {
background-position: 0 -24px;
}

完整表格範例按這裡下載。
樣式為留言表單的樣式。