在IE下直接用height、border定義select沒有效果，目前大部分情況都是用js進行模擬，其實css也是可以做得到的，原理很簡單，隱藏select選擇框的原生邊框，再用其他元素模擬內邊距及邊框就OK了。

首先看一下預設的select在各個瀏覽器的表現情況。

從上圖中我們可以看各個瀏覽器對select的渲染不對高度不一致，連長度也不盡相同，唯一相同的就是邊框寬度一致（廢話）。下面我們對select進度高寬度行高及字型樣式等進行定義，看看有什麼情況發生，CSS程式碼：

.city{width:200px;height:20px;font:normal 12px/20px Tahoma,Geneva,sans-serif;overflow:hidden;}

在瀏覽器下select寬度表現相同，高度大部分表現相同，除了Safair，Safair對select渲染的高度為其內部高度，即內部高度(20px)+上下邊框高度(4px)=24px，這個如果有需要，可單獨對safair設css hack。

@media screen and (-webkit-min-device-pixel-ratio:0){.city{line-height:16px;}}

言歸正傳，既然統一了select在各個瀏覽器下的高寬度(200px*20px)，那麼接下來的事情就好辦了，除去select上下左右各2px的邊框，剩下的就是文字部分和下拉箭頭部分了，在select外部加一個標籤

，設定.select-wrap寬度為196px高度為16px的，多餘部分溢位隱藏，此時如果再給select設定margin:-2px 0 0 -2px;，那麼select中間部分正好與.city這個div重合，即正好隱藏掉了select的邊框。

CSS如下：

.select-wrap{width:196px;height:16px;line-height:16px;overflow:hidden;}
.city{margin:-2px 0 0 -2px;width:200px;height:20px;font:normal 12px/20px Tahoma,Geneva,sans-serif;overflow:hidden;}
@media screen and (-webkit-min-device-pixel-ratio:0){.city{line-height:16px;}} /*for safair*/

如上圖所示，在IE6\IE7下select還有1px的頂部邊框，再給select加上float:left;或者display:block;問題就解決了；

隱藏select邊框做好了，接下來就是在.select-wrap再加一個標籤用來模擬select邊框

.select-box{padding:10px;width:196px;border:1px solid #ccc;background:#fff;}
.select-wrap{width:196px;height:16px;line-height:16px;overflow:hidden;}
.city{margin:-2px 0 0 -2px;width:200px;height:20px;font:normal 12px/20px Tahoma,Geneva,sans-serif;overflow:hidden;display:block;}
@media screen and (-webkit-min-device-pixel-ratio:0){.city{line-height:16px;}} /*for safair*/