私は理解できない非常に奇妙な問題を抱えています。Bootstrap を使用してサイトをデザインしていますが、スタイルの一部を変更するために、Bootstrap の後にカスタム スタイルシートも含めています。
私が抱えている問題は、Mac 上の Firefox バージョン 23.0.1 で、選択リスト内のテキストが垂直方向に中央からずれていることです。高すぎる。オプションのスタイリングもオフです。つまり、ブートストラップが通常適用する適切なパディングがありません。
選択用の HTML は次のとおりです。
<select name="sort" id="sort" style="display:inline-block;width:400px;margin-top:20px;margin-left:20px;"class="form-control" onchange="this.form.submit()">
<option %%GLOBAL_SortFeaturedSelected%% value="featured">%%LNG_FeaturedItems%%</option>
<option %%GLOBAL_SortNewestSelected%% value="newest">%%LNG_NewestItems%%</option>
<option %%GLOBAL_SortBestSellingSelected%% value="bestselling">%%LNG_Bestselling%%</option>
<option %%GLOBAL_SortAlphaAsc%% value="alphaasc">%%LNG_AlphaAsc%%</option>
<option %%GLOBAL_SortAlphaDesc%% value="alphadesc">%%LNG_AlphaDesc%%</option>
<option %%GLOBAL_SortAvgReview%% value="avgcustomerreview">%%LNG_AvgCustomerReview%%</option>
<option %%GLOBAL_SortPriceAsc%% value="priceasc">%%LNG_PriceAsc%%</option>
<option %%GLOBAL_SortPriceDesc%% value="pricedesc">%%LNG_PriceDesc%%</option>
</select>
カスタム スタイルシートを削除すると、選択リストが正しく表示されます。これは、Bootstrap と私のスタイルシートの両方が含まれている jsfiddle です。
スタイルシートが削除され、Bootstrap のみが含まれていることを除いて、まったく同じ jsfiddle を次に示します。
ご覧のとおり、最初の jsfiddle の選択のスタイリングはオフになっていますが、カスタム シートのどの宣言がこれを引き起こしているのかわかりません。
この問題は Chrome では見られず、PC 上の同じバージョンの Firefox でも見られません。
ここで何が起こっているのか誰にも分かりませんか？