Einstellen der Höhe eines
https://stackoverflow.com/questions/1614206
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
ich ein seltsames Problem mit HTML-Auswahlbox Höhe haben in Firefox 2, hier ist der Code:
<!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>
Die Höhe beträgt 2 Pixel größer - Polsterung, Schriftgröße und Zeilenhöhe scheinen nicht auf sie keine Wirkung zu haben, und ich lief aus Ideen und Orte zu suchen. Soll ich davon ausgehen, dass die tatsächliche Höhe der Auswahlbox in FF2 ist immer css Höhe + 2? Kann ich es oder Arbeit um das Problem beheben?
Lösung
Willkommen in der wunderbaren Welt der Form Kontrolle Styling.
Ohne es zu wollen defätistische klingen, ich glaube, Sie sollten nur nach oben geben. Egal, wie Sie Stil Form kontrolliert wird es immer Browsern, die völlig Ihre Stile ignorieren. Ich glaube, dass Safari die meisten CSS ignoriert. Siehe ' Styling wählen Elemente ' auf 456 Berea Street für Beispiele.
Es gibt Alternativen mit Javascript - Ich glaube, jQuery UI einige Widgets ähnlich dem select-Element hat. Sie könnten auch diese verwenden jQuery Klick-Menü und eine Funktion anhängen, die den Wert legt der ein verstecktes Eingabefeld. Ich habe das schon mal gemacht und es funktioniert gut. Diese Art von Dingen ist die einzige Art und Weise erhalten Sie volle Kontrolle über die Größe und das Aussehen erhalten.
Andere Tipps
Es kann einige Browser Standardeinstellungen im Spiel sein. was passiert, falls du eine zurückgesetzt und dann gelten Ihre Stile? Ist es immer noch 2px aus?
Aufgeben auf die Verwendung von CSS es um Stil. Umfassen jquery / javascript.
Sie wollen Ihre eigenen Bilder erstellen, und das Click-Ereignis dieser Bilder verwenden, um die tatsächlichen Formulareingaben zu wechseln. Diese Form Eingänge sollten in einem Behälter gestylt sehen sein: keine. Auf diese Weise können Sie es entwerfen, wie Sie wollen.
Hier ist ein guter Artikel zum Thema: http: //www.noupe. com / css / form-Elemente-40-cssjs-Styling-und-Funktionalität-techniques.html
