Warum Chrome, Firefox und IE Alle Render mit fester Breite unterschiedlich SELECT Kontrollen?

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

  •  02-07-2019
  •  | 
  •  

Frage

Ich bin zu verlieren Haare auf dieses ... es scheint, dass, wenn ich Breite eine HTML-SELECT-Steuerelement fixieren macht es seine Breite unterschiedlich je nach Browser.

Jede Idee, wie man auf diese zu standardisieren, ohne dass mehrere Stylesheets drehen?

Hier ist das, was ich arbeite mit: 

.combo
{
    padding: 2px;
    width: 200px;
}

.text
{
    padding: 2px;
    width: 200px;
}

Das ist mein Dokumenttyp für die Seite: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
War es hilfreich?

Lösung

Form Regler immer weniger gehorsam Styling Versuche, insbesondere auswählt und Datei-Eingänge, so dass die einzige Art und Weise zuverlässig sie Cross-Browser, um Stil und mit Zukunftssicherheit im Auge, ist sie mit JavaScript oder Flash zu ersetzen und Mimik ihre Funktionalität

Andere Tipps

Versuchen Sie, auf die wählt Einstellung font-size auch, die beeinflussen können, wie sie gerendert werden. Sehen Sie sich auch die min-width und max-width Eigenschaften.

input [type = text] wählen {      border: solid 1px # c2c1c1;      Breite: 150 Pixel;      padding: 2px;      }

// dann

wählen {      Breite: 156px; // muss input [type = text] Breite + (Grenze und padding) sein      }

/ * Die Eingabe [type = text] width = Breite + + padding Grenze

Die Auswahl Breite gerade gleich der Breite. Die Polsterung und die Grenze kommen innerhalb dieser Breite constraint gerendert. Das ist nur die Art und Weise SELECT Rollen ...

* /

Stellen Sie sicher, dass Sie alle Standardränder und Polsterung, entfernen und sie explizit definieren. Stellen Sie sicher, dass Sie eine richtige DOCTYPE verwenden und daher Rendering IE im Standardmodus.

Sie können gefälscht Drop-Down-Widget verwenden und die SELECT ersetzen.

Browser neigt dazu, die Menge zu begrenzen Sie Formular-Steuerelemente mit CSS-Stil können, weil Formular-Steuerelemente viel komplizierter Styling hat, die zwischen den Betriebssystemen variieren. CSS kann das nicht vollständig beschreiben, so Browser einige davon off limits setzen.

Eric Meyer hat einen guten Artikel zum Thema:

http://meyerweb.com/eric/thoughts/ 2007/05/15 / formal-Seltsamkeit /

Das Beste, was Sie tun können, ist, dass Sie akzeptieren nicht über die vollständige Kontrolle über das Aussehen von Formularfeldern und experimentieren mit dem, was Styling ist wirklich wichtig.

Versuchen Sie Firebug oder Chrome "Inspect Element" -Funktion ( Rechtsklick auf der Auswahlsteuerung, klicken Sie auf „Inspect Element“), genau zu sehen, welche Art Eigenschaften für dieses spezielle Objekt geerbt / gemacht werden. Das sollte Sie in die richtige Richtung führen.

Ich habe all diese Vorschläge ausprobiert ... und ich habe es endlich so es in IE und Firefox gut aussieht. Sieht aus wie es ist etwas falsch mit der Polsterung auf dem SELECT-Steuerelement ist. Wenn ich die Breite des SELECT um 2 Pixel erhöhen Größe der jetzt korrekt. 

 .combo
 {
     padding: 2px;
     width: 206px;
 }

.text
{
    padding: 2px;
    width: 200px;
}

Allerdings Chrome immer noch nicht ihnen die gleiche Größe aufweisen.

Martinator ist richtig.

Klingt wie Sie die Breite der verschiedenen Arten von Eingängen oder Menüs über bowsers zu steuern versuchen. Sie können direkt das Objekt auswählen und die Breite angeben. Zum Beispiel: 

select {
  width:350px;
}

Oder Sie können dies tun, mit Textbereich: 

select {
      width:350px;
}

Andere Typen von Eingaben erfordern die Syntax Martinator erwähnt. Also, für einen Text, eingegeben wird, oder auch Typ-Eingabedatei, würden Sie dies tun, für jeden: 

input[type=text] {
      width:350px;
}

input[type=input] {
      width:350px;
}

input[type=file] {
      width:350px;
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top