Firefoxのドロップダウンオプションfont-sizeがレンダリングされない

Question

<option>のフォントを<select>のリストに増やす必要があります。これはChromeで簡単に機能しますが、Firefoxでは唯一選択肢が増えています。

のFirefox：私のFirefoxのバージョンがthis fiddleを参照50.1.0

、私は次のように異なる結果を得ることである

クローム：

select { 
 
    font-size: 200%; 
 
}

<select> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
</select>

FirefoxでもFirefoxと同じ動作を期待しています。

Answer 1

少しスヌーピングした後で、新しいバージョンのFirefoxでこの問題が報告されている人もいます。私自身が開発版を使用していますが、私はあなたと同じ問題があります。

このarticleは、Mozillaの人がこの点でかなり面白いです。

複数のブラウザ/デバイスに選択ボックスのスタイリングに関するセクションがありますが、オプションが薄く見えます。

通常、-moz-appearance: noneのようなCSS属性は役に立ちますが、この場合は回避できません。新しいバージョンのFirefoxのバグであるとの報告がありましたので、すぐに手をつないでしまいました。がんばろう！

Answer 2

UPDATE

は、私は（私が原因で満月に一定のMacで発生するいくつかの小さな既知のバグの私のソリューションが働くだろう100％確認されませんでしたという理由だけで、完全に私の狂気の後ろの方法を説明することを怠っ私はPCを使い、Macのグラフィックを嫉妬していると言うことができます）。

あなたはMacを持っていたと思いました。いずれにせよ、ソリューションは機能します。フォントと継承を扱うとき

、私たちは自然に我々がbody {font-size:16px;}継承を持っている場合はすべてに16pxにの快適な毛布のような要素の残りの部分にまでカスケード接続すると仮定することができます。フォーム要素は無視され、デフォルトではフォントプロパティを継承しません。直接のように... ...

修正1に似inherit値を使用して

• か...
• ...修正2でのように親から継承するか：私たちは、ことで、この問題を解決することができます修正3.

---

にこのスニペットは、3つの修正を持ち、そのうちの一つは、うまくいけば、あなたのために動作します。

SNIPPET

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    font: 600 16px/1 Verdana; 
 
} 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 1; 
 
} 
 
fieldset { 
 
    padding: 10px; 
 
    margin: 50px auto; 
 
} 
 
legend { 
 
    text-align: right; 
 
} 
 
select { 
 
    width: 6ex; 
 
} 
 
/* Fix #1 
 
|~~~~~~~~*/ 
 

 
select#X { 
 
    font-size: 2em; 
 
} 
 
select#X > option { 
 
    font-size: inherit; 
 
} 
 
/* Fix #2 
 
|~~~~~~~~*/ 
 

 
select#Y { 
 
    font-size: 200%; 
 
} 
 
select#Y > option { 
 
    font-size: 100%; 
 
} 
 
/* Fix #3 
 
|~~~~~~~~*/ 
 

 
select#Z { 
 
    font-size: 32px; 
 
} 
 
select#Z > option { 
 
    font-size: 32px; 
 
}

<fieldset> 
 
    <legend> 
 
    <h1>Font-size</h1> 
 
    <h2>Select<br> 
 
    Option</h2> 
 
    </legend> 
 

 
    <select id='X' name='X'> 
 
    <option value="X">X</option> 
 
    <option value="1">2em</option> 
 
    <option value="2">inherit</option> 
 
    </select> 
 

 
    <select id='Y' name='Y'> 
 
    <option value="Y">Y</option> 
 
    <option value="1">200%</option> 
 
    <option value="2">100%</option> 
 
    </select> 
 

 
    <select id='Z' name='Z'> 
 
    <option value="Z">Z</option> 
 
    <option value="1">32px</option> 
 
    <option value="2">32px</option> 
 
    </select> 
 

 
</fieldset>

Answer 3

これは、Firefoxのバグですが、それでも今

まで固定されていない彼らはそれが解決されたが、問題はまだ

無効に存在すると述べましたマルチプロセスとそれは正常に動作します

バグのリンク：私のFirefoxで

https://bugzilla.mozilla.org/show_bug.cgi?id=910022