Ich erwarte folgenden Code, um meine Spanne in die obere linke Ecke der Schaltfläche zu setzen, tut es aber nicht. Warum ist das so?
%Vor% <span> wird relativ zur vertikalen- mittleren Zeile platziert (mit 3px Padding kann ich das nicht erklären).
Ersetzen von <button> durch <div> bewirkt, dass <span> in der oberen linken Ecke platziert wird.
Frage: Warum verhält sich die absolute Positionierung innerhalb der Schaltfläche (mit Position: relativ) anders als im Layout mit <div> ? Und wie repariere ich es?
Hintergrund: Ich verwende zwei absolut positionierte divs innerhalb der Schaltfläche, um eine schwebende Schaltfläche mit abgerundeten Ecken zu erstellen.
BEARBEITEN: WICHTIG IE 8.0 funktioniert genau so, wie ich es erwarte (Bereich in der oberen linken Ecke), das Problem, das ich sehe, ist in Firefox (3.6.6) .
Ich rate davon ab, ein <button> auf diese Weise zu verwenden. Es ist wirklich schwierig zu stylen und Sie müssen bestimmte Stile für verschiedene Browser schreiben.
Ich musste etwas sehr Ähnliches erreichen und nachdem ich mich mit einer großen Anzahl von Ausnahmen und findiger Positionierung beschäftigt hatte, um verschiedene Browser-Renderings zu berücksichtigen, entschied ich mich stattdessen für diese Struktur:
Mit der Schaltfläche Tag zurücksetzen:
%Vor% Sie können sogar js verwenden, um das <button> beim Laden der Seite zu umbrechen. Dieses System hat sich als solider und zuverlässiger erwiesen. Erfordert weniger CSS und fast kein Browser-spezifisches Styling.
Aktualisierung:
Wie unten erwähnt, sollte das Umbruchelement kein <a> -Tag sein. Denken Sie daran, dass wir das <button> benötigen, um seine Funktionalität zu behalten, wir brauchen es nur als Text (das Formular wird immer noch bei Enter übergeben).
Sie können immer noch jede CSS verwenden, die Sie verwenden, um Standard-Links in erweiterbare Schaltflächen-Widgets zu verwandeln, nur in diesem Fall ist es ein <div> anstelle von <a> .
Tags und Links html css css-position