填充不會在Safari上選擇標籤工作

可能重複：
padding is not working in Safari and IE in select list 填充不會在Safari上選擇標籤工作

所以我有一個基本的選擇標記，像這樣：

<select> 
    <option>1</option> 
    <option>2</option> 
    <option>2</option> 
</select>

但如果我在選擇標記上放置了填充，它在Safari上不起作用：

select { 
    padding: 6px; 
}

在IE7上，我明白，但在Safari？有沒有辦法解決這個問題？

來源

2012-03-08 catandmouse

看到http://stackoverflow.com/questions/2966855/padding-is-not-working-in-safari-and-ie-in-select-list – Luca 2012-03-08 09:22:07

回答以前在這裏：https://stackoverflow.com/a/2967371/181002

的Webkit已經獨自去禁止填充爲select -items，但你可以通過一個簡單的「黑客」達到同樣的效果，包括應用line-height和text-indent到您的選擇物品。

下面是一個例子：http://jsfiddle.net/B858P/

來源

2012-03-08 09:22:24

我會喜歡看你的jsFiddle例子，但我認爲鏈接被打破了。 – catandmouse 2012-03-09 07:22:26

是的，它看起來像jsFiddle失效。這裏有一個jsBin的等價物：http://jsbin.com/eleduj/2/edit雖然被警告，這個hack幾乎是webkit獨佔的，因爲text-indent似乎在Firefox的框外發送小選擇圖標，行高只是沒有做任何事情，這意味着你可能會被迫執行各種整齊的CSS黑客來讓它跨瀏覽器工作，在那個時候，你可能更好的構建我們自己的自定義選擇框：http://weblogs.asp.net/jaimedelpalacio/archive/2008/11/22/custom-html-dropdown-control-part-1.aspx – 2012-03-09 07:31:22

我只是想知道爲什麼禁止填充webkit瀏覽器背後的原因是什麼？無論如何，在Chrome中填充顯示，問題只出現在Safari中。無論如何，我會嘗試你的解決方案。 – catandmouse 2012-03-09 08:49:12

填充不會在Safari上選擇標籤工作

回答

相關問題