CSS: absolute Positionierung einer Schaltfläche in Firefox
Ich möchte eine Schaltfläche anzeigen, die alle Leerzeichen ihres übergeordneten Elements übernimmt, das selbst absolut positioniert ist.
Aber es scheint, dass Firefox einen Fehler damit hat (Alles läuft perfekt in Chrome und Safari (Webkits), ich kann nicht auf IE testen, weil ich auf dem Mac bin (wenn jemand im Kommentar testen und sagen kann, wenn es läuft) oder nicht, es wäre wirklich nett)).
Das Ziel ist:
Div und Button sind zusammen in einem Wrapper enthalten, der absolut positioniert ist.
Der HTML-Code lautet:
%Vor%Das ist ziemlich einfach. Das Problem ist, dass es bei Firefox so aussieht:
Hast du eine Ahnung, warum Firefox diesen Code so darstellt und hast du einen Workaround mit ähnlicher Positionierung?
EDIT: Ich kann nicht (und ich will nicht) Breite und Höhe auf inneren Kind setzen. Der Grund ist, dass ich GWT mit Layout-Mechanismen verwende. Das GWT-Layout verwendet die Elemente bottom / top / left / right, um Elemente zu positionieren und zu vergrößern. Daher kann ich dieses Verhalten nicht ändern. Alles läuft mit klassischem Div. Das Problem betrifft nur Schaltflächen.
3 Antworten
Der Grund dafür ist, dass <button> zumindest in Gecko ein ersetztes Element ist und für ersetzte Elemente die Regeln, was left: 0; right: 0 im CSS bedeutet, anders sind als für nicht ersetzte Elemente ...
Versuchen Sie,
hinzuzufügen %Vor% zur Deklaration .inner .
Ich habe festgestellt, dass es sogar in Internet Explorer 7+ funktioniert. In IE6 schlägt es fehl, aber es ist kaum eine Überraschung. Leider versagt es auch in Opera genau so, wie es ursprünglich in Firefox funktioniert.
Stellen Sie auch eine Breite und Höhe für das innere div ein.
Tags und Links html css cross-browser firefox