在選擇框中垂直對齊的文本 - Firefox的問題

我在Firefox中選擇框標題的垂直對齊時出現問題。在選擇框中垂直對齊的文本 - Firefox的問題

screen from Firefox

CSS的選擇看起來是這樣的：

select#cities_list { 
    width: 95px; 
    height: 45px; 
    line-height: 45px; 
    background: url('./img/select-arrow.png') no-repeat right transparent; 
    -webkit-appearance: none; 
    border: 1px solid #dcdcdc; 
    border-left: none; 
    border-right: none; 
    padding: 0 10px; 
    margin: 0; 
    float: left; 
}

在Chrome的一切都看起來不錯：

enter image description here

幫助！

來源

2012-08-12 forkie

嗨，你是否解決了這個問題？如果是的話，那麼請幫助我.. !! – 2013-03-20 05:51:58

你可以試試這個

padding:.3em;/.4em;

根據您的配置。

來源

2012-10-05 07:24:29 nirupam

這到底是什麼？我只是嘗試了這一點，它大部分工作。這是什麼？ – ClosDesign 2012-11-28 22:24:15

這是什麼樣的魔法？它只是工作完美... – 2013-08-14 23:05:03

雖然我不知道爲什麼這個工程...就像一個fyi你也可以這樣說：padding：.3em .4em .3em .7em;/0;它似乎工作。 – corymathews 2013-10-25 20:30:18

另一種方法，一個是我願意的話，是這樣的：

@-moz-document url-prefix() { 

    select { 
     padding-top: 8px; 
    } 
}

設置爲任何你喜歡的padding-top。僅在Firefox上執行括號內的任何內容。

來源

2014-01-28 22:05:04 Jarrod

這是黑客嗎？這會忍受未來的Firefox版本嗎？我將padding-top：4px應用於select輸入，並解決了問題。看起來，選擇按鈕確實只在Firefox上改變了它的垂直位置，但是我擔心一些未來的瀏覽器或未經測試的瀏覽器將不會由於4px的填充頂部而被對齊。你會對此有何評論？提前致謝！ – 2014-07-03 08:48:14

在選擇框中垂直對齊的文本 - Firefox的問題

回答

相關問題