IE只填充<select>下拉問題

我有一些填充到左側選擇列表：IE只填充<select>下拉問題

<select> 
    <option>Opt A</option> 
    <option>Opt B</option> 
</select>

CSS

select 
{ 
padding-left:20px; 
}

在除了IE瀏覽器每次（我使用IE8，贏XP，IE8標準），我可以通過點擊下拉框左側的填充來輕鬆打開選擇。但是，在IE中，需要兩次點擊才能使用此填充打開下拉列表。

如何通過單擊單擊該填充區域來打開IE中的下拉菜單？我願意使用js，如果我絕對必須但想避免它。

有關此問題的示例，請參閱此jsfiddle。單擊左側的填充區域以查看IE中的功能。

編輯：

我應該澄清。我已經有了一個樣式化的下拉菜單，它是CSS和常規HTML的組合。下拉菜單左側有一個箭頭圖像，這就是爲什麼文本上的填充很重要。我不想改變這一切。我只想在點擊填充區域時在IE中正常運行。

替代方法

作爲一種變通方法，我已刪除從CSS填充，現在我在填充選項的實際文本與nbsp;模擬填充。非常黑客，因爲它現在停止任何用戶輸入到選擇框跳轉到特定的值。但是因爲我需要支持IE，所以這可能必須是我現在的方式。

<select> 
    <option>&nbsp;&nbsp;&nbsp;Opt A</option> 
    <option>&nbsp;&nbsp;&nbsp;Opt B</option> 
</select>

來源

2012-07-10 Rondel

可能想看看這個：http://www.sitepoint.com/forums/showthread.php?593031-Padding-on-select-element 總之，選擇標籤上的填充是已知的在IE中有點bug。 – MusikAnimal 2012-07-10 01:26:42

你可以嘗試使用'text-indent'和'line-height'。請參閱：http://stackoverflow.com/questions/2966855/padding-is-not-working-in-safari-and-ie-in-select-list – MusikAnimal 2012-07-10 01:29:06

「text-indent」在ie8中似乎沒有做任何事情下降。填充被剝離。它適用於其他瀏覽器，但不能解決ie問題。 http://jsfiddle.net/YTpnf/3/ – Rondel 2012-07-10 02:37:04

這是在IE中一個常見的問題，一些屬性與<select>打破，現在，因爲你打開新的和不同的解決方案，我建議這些jQuery的解決方案：

Option 1
Option 2
Option 3（這個人是不是jquery的）

希望它有幫助！

來源

2012-07-10 02:34:36 Luis

謝謝。我過去選擇過，但這不是我在這種情況下尋找的。我只想在IE中使我現有的下拉實現工作。 – Rondel 2012-07-10 02:55:20

IE只填充<select>下拉問題

回答

相關問題