it-swarm.com.de

Die Firefox-Dropdown-Option Schriftgröße wird nicht gerendert

Ich muss die Schriftart für den <option> einer <select>-Liste erhöhen. Während dies in Chrome problemlos funktioniert, wird in Firefox nur die ausgewählte Option erhöht. Meine Firefox-Version ist 50.1.0

Bezüglich dieser Geige erhalte ich folgende unterschiedliche Ergebnisse:

Feuerfuchs: Chrome result

Chrom: Firefox result

select {
  font-size: 200%;
}
<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

Ich erwarte, dasselbe Verhalten von Chrome auch in Firefox zu erhalten.

15
Mark

Nachdem ich ein wenig herumgeschnüffelt habe, sehe ich, dass einige Leute dieses Problem in neueren Firefox-Versionen gemeldet haben. Ich selbst benutze die Entwicklungsversion und habe das gleiche Problem wie Sie.

Dieser Artikel von den Jungs von Mozilla ist in dieser Hinsicht sehr interessant. 

Es gibt einen Abschnitt zum Auswählen von Auswahlfeldern über mehrere Browser/Geräte, aber Ihre Optionen sehen dünn aus. 

Normalerweise können CSS-Attribute wie -moz-appearance: none helfen, aber in diesem Fall sehe ich keine Problemumgehung. Ich habe Berichte darüber erhalten, dass dies ein Fehler in neueren Firefox-Versionen ist. Viel Glück!

4
Ian Taylor

Dies ist ein Fehler in Firefox, aber immer noch nicht behoben.

Sie sagten, es sei gelöst, aber das Problem besteht immer noch.

Deaktivieren Sie Multi-Process und es wird gut funktionieren.

So deaktivieren Sie Multi-Process: (von LINK ):

Gehen Sie zu "about: config". Suchen Sie nach "browser.tabs.remote.autostart". Es kann mehrere Ergebnisse geben. Setzen Sie alle auf "false" und starten Sie den Browser neu.

Bug Link:

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

4
Hope Mystery

UPDATE

Ich habe es versäumt, die Methode hinter meinem Wahnsinn vollständig zu erklären, einfach weil ich nicht zu 100% sicher war, dass meine Lösungen funktionieren würden, weil bei einigen Macs auf dem Fullmoon ein kleiner bekannter Fehler auftrat (wie Sie sehen, benutze ich PC und bin neidisch auf Macs Grafik.)

Ich dachte, du hättest einen Mac, mein schlechter. Egal, die Lösungen funktionieren.

Beim Umgang mit Zeichensätzen und Vererbung können wir natürlich davon ausgehen, dass eine Vererbung mit body {font-size:16px;} auf den Rest der Elemente wie eine angenehme Decke von 16 Pixeln auf alles übergeht. Formularelemente werden vernachlässigt und erben standardmäßig keine Schrifteigenschaften. Wir können das beheben durch:

  • Verwenden Sie den inherit-Wert wie in Fix 1 oder ...
  • ... erben von einem Elternteil wie in Fix 2 oder ...
  • ... direkt wie in Fix 3.

Dieses Snippet enthält 3 Korrekturen, von denen einer hoffentlich für Sie funktionieren wird.

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>

1
zer00ne