Impostazione dell'altezza di a < seleziona > in Firefox 2

StackOverflow https://stackoverflow.com/questions/1614206

Domanda

Ho uno strano problema con l'altezza della casella di selezione HTML in Firefox 2, ecco il codice: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>FIREFOX 2 SELECT BOX HEIGHT ISSUE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
      body    { margin: 0; padding:0 ;}
   div     { height: 20px; background:red; float: left; overflow: hidden; }
   select  { height: 20px; width: 100px; }
    </style>
  </head>

  <body>
    <div>Should be same height as </div>
    <select><option>this</option></select>
  </body>
</html>

L'altezza è di 2 pixel più grande - l'imbottitura, la dimensione del carattere e l'altezza della linea non sembrano avere alcun effetto su di esso e ho finito le idee e i luoghi in cui cercare. Dovrei supporre che l'altezza effettiva della casella selezionata in FF2 sia sempre altezza css + 2? Posso ripararlo o aggirarlo?

È stato utile?

Soluzione

Benvenuti nel meraviglioso mondo dello stile di controllo dei moduli.

Senza voler sembrare disfattista, penso che dovresti rinunciare. Indipendentemente dal modo in cui controlli i moduli di stile, ci saranno sempre browser che ignorano totalmente i tuoi stili. Credo che Safari ignori la maggior parte dei CSS. Vedi " styling select elements " in 456 Berea Street per esempi.

Ci sono alternative che usano Javascript: credo che UI jQuery ha alcuni widget simili all'elemento select. Puoi anche utilizzare questo menu di selezione jQuery e allegare una funzione che imposta il valore di un campo di input nascosto. L'ho già fatto e funziona bene. Questo tipo di cose è l'unico modo per ottenere il pieno controllo delle dimensioni e dell'aspetto.

Altri suggerimenti

Potrebbero esserci alcune impostazioni predefinite del browser in riproduzione. cosa succede se usi un ripristina CSS e poi applichi i tuoi stili? È ancora spento 2px?

Smetti di usare CSS per modellarlo. Abbraccia jquery / javascript.

Dovrai creare le tue immagini e utilizzare l'evento click di quelle immagini per attivare o disattivare gli input del modulo. Tali input di modulo devono essere in un display in stile contenitore: nessuno. In questo modo, puoi progettarlo come preferisci.

Ecco un buon articolo sull'argomento: http: //www.noupe. com / css / form-elementi-40-cssjs-styling-e-funzionalità-techniques.html

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top