首先先指出這個怪事的主角,它就是IE8。IE7沒試過,而IE6處理這個動作是正常的。
當我使用jQuery來動態產生select的option時,IE8會讓該select物件和其後的其他HTML元件重疊在一起,看起來的效果就好像其後的HTML元件和select物件置中對齊一樣。
實驗的結果發現IE8對動態產生option的select無法判斷width屬性。其實select顯示的寬度的確會隨著動態加入option而變寬,但網頁顯示的寬度卻沒有變化,而這寬度包括瀏覽器(IE8)安排各 HTML元件預設會保留的寬度。所以select物件本身變寬,但與其後物件排列的位置卻仍和沒有option時一樣,看起來就像重疊一樣。
解決的方式就是將select加上 width屬性。