Html下拉選單ComboBox的Width不精準的問題

這是個目前沒有好解法的問題，這相信一般人碰到機會或許不到，因為現在大多數的人排版網頁應該會用相對位置，而非絕對位置，也不太會有老闆跟我老闆一樣，要你一個Pixel也不能歪掉的對齊。（拿尺在螢幕上量是家常便飯）不過既然發生了，我就記錄一下，以免後來忘記。


ComboBox下拉式選單在HTML4的語法是這樣

<select name="thelist" class="Language">
  <option>English</option>
  <option>繁體中文</option>
  <option>簡体中文</option>
</select> 

在HTML5的語法是這樣

<input type=text list=browsers >
<datalist id=browsers >
   <option> Google
   <option> IE9
</datalist>

而HTML5的作法相當彈性，如果按照這個初始值來設定，出來的下拉選單會非常的陽春，而且只是個DropDown元件，可編輯，外觀看起來又像是TextInput元件，所以我採用HTML4的作法。

而我做出這個元件之後，由於要對齊於背景圖，採用絕對位置，所以我需要在JavaScript去計算Left位置，所以我需要去透過JQuery去抓Language這個select元件的寬度，一抓，發現各家瀏覽器抓出來的數值差很大，Chrome跟IE比較接近，但稍有幾個Pixels的誤差，而Safari差的可多了，造成計算位置大錯誤。
解法：

我原本是不設定此物件的寬度，由文字個數跟Font-Size來決定寬度就好，而上述的抓寬度出來的數值錯誤，只好改為，我在CSS當中自己先設定了Width，（當然，這裡要實驗個幾次，在各瀏覽器確實都能正確顯示，這寬度才合適），然後在JavaScript就不用透過JQuery去抓寬度，而是直接用剛剛的固定寬度來計算就好，這樣才能得到正確的位置。