选择在FF中粘贴到框顶部的框文本

Question

我有一个选择字段，无论我做什么，我都无法让文字停留在框顶部。

以下是它的外观示例：

如果我使用padding-top，那么它也会按下箭头按钮，这是我不想要的。我也试过line-height但没效果。

以下是相关的CSS：

#header .nav .misc .search .search_holder .cats select {
    width: 111px;
    height: 29px;
    border-top: 1px solid #97ad00;
    border-bottom: 1px solid #97ad00;
    border-left: none;
    border-right: none;
    padding-left: 8px;
    font-family: Roboto, Arial;
    font-size: 14px;
    background: url('../images/search-cats-bg.png') 0 0 repeat-x;
    color: #b2b2b2;
}

#header .nav .misc .search .search_holder .cats select option {
    padding-top: 5px;
}

#header .nav .misc .search .search_holder .cats select option.last {
    padding-bottom: 5px;
}

修改：添加了HTML。

HTML：

<div class="cats">
    <select id="search_cats" class="search_cats" name="cat">
        <option value="all">All Categories</option>
        <option value="sports">Sports Cards</option>
        <option value="gaming">Gaming Cards</option>
        <option value="non-sport">Non-Sport Cards</option>
        <option value="supplies" class="last">Supplies & Storage</option>
    </select>
</div>

为什么要这样做以及如何解决？

编辑：似乎无法修复，发现了这个问题：

I want to vertical-align text in select box

如果您查看“Shelly Skeens”的答案，那么您会发现FF决定将内置line-height设置为normal !important，因此无法覆盖。

Answer 1

尝试添加

.cats * { line-height: 16px; }

Answer 2

适用于Google Chrome和Google开发者工具