2010-02-02 9 views
9

Ich arbeite an einem großen Formular und es enthält eine Menge von Knöpfen im ganzen Formular, deshalb versuche ich, Arbeitseingabe zu erhalten [type = "button" ] in meiner Haupt-CSS-Datei, so dass es alle Tasten fangen würde ohne eine Klasse zu jedem einzelnen hinzuzufügen, aus irgendeinem Grund funktioniert dies nicht auf IE7, nach der Überprüfung im Internet heißt es, IE7 sollte dies unterstützen.Css-Attributselektor für Eingangstyp = "Knopf" arbeitet nicht am IE7

Es muss auch type = "button" und nicht type = "submit" sein, da nicht alle Buttons das Formular senden.

Kann jemand einen Hinweis geben, was mache ich falsch?

input[type="button"] { 
    text-align:center; 
} 

Ich habe auch versucht input[type=button]

+0

Dies kann verwandt sein: http://stackoverflow.com/questions/2112783/attribute-selectors-javascript-and-ie8 –

+0

Ich habe geschrieben [ein Artikel] (http://sarfraznawaz.wordpress.com/2010/ 02/22/css-attribut-selector /) mit einigen detaillierten Informationen über CSS-Attributselektoren. – Sarfraz

Antwort

25

Ich hatte Schwierigkeiten, input[type=button] Selektoren in IE7 oder IE8 arbeiten. Das Problem bestand darin, dass die HTML-Seiten eine "! DOCTYPE" -Deklaration fehlten. Sobald ich hinzugefügt

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

Dann alles hat gut funktioniert. Sie können natürlich eine andere "! DOCTYPE" -Deklaration verwenden, um Ihren Anforderungen zu entsprechen.

+0

iv'e bemerkte, dass ein .aspx! DOCTYPE wie folgt ist: wo würden Sie den HTML-Teil hinzufügen, den Sie vorschlagen? Soll ich das XHTML 1.0 damit ersetzen? –

+0

Ich vermutete, dass jede definierte Art von "DOCTYPE" dazu führen würde, dass die Selektoren funktionieren würden. Arbeiten sie nicht mit dem oben aufgeführten Doctype für Sie? – ipr101

+0

es funktioniert nicht, aber wenn ich daran denke, habe ich es nur auf Google Chrome überprüft (vielleicht ist es spezifisch für den Browser) –

1

Attributselektoren sind leider noch nicht gut in allen gängigen Browsern implementiert, weil es CSS3 und nicht 2.1, der aktuelle Standard. Da die Jungs bei W3C nicht so schnell Entscheidungen treffen, sollten Sie Ihre Hoffnungen nicht zu hoch setzen, denn wir werden css3 in absehbarer Zeit nicht nutzen können. Einige Aspekte davon sind bereits implementiert, aber dieses ist nicht (sicherlich nicht in IE6).

Also, wie Sie bereits selbst sagten, wäre es viel besser, alle Ihre Eingaben mit einer Klasse zu versehen, und machen Sie es sich zur Gewohnheit, dies jedes Mal zu tun, wenn Sie ein Formular erstellen. Es ist immer praktisch und nicht viel Arbeit, wenn Sie das Formular bereits programmieren.

Wenn ich ein Formular erstellen, ich den Typ eines Eingangs als Klasse immer hinzufügen, zum Beispiel:

die letzten beiden in vielen Fällen nützlich sein wird, weil man vor allem have nicht, die .button und .submit separat zu stylen, aber Sie cóuld, wenn Sie dies möchten.

+0

+1. Es mag erwähnenswert sein, dass wenn das OP keine Klassen hinzufügen möchte, kann er sowas mit Javascript oder einem js Framework wie jQuery machen. :) – munch

+0

Attribut Selektoren sind CSS 2, nicht 3, und waren eine vollständige W3 'Empfehlung' für eine lange Zeit. (Selbst CSS3-Selektoren sind eine "vorgeschlagene Empfehlung", die weit außerhalb der IE-Welt ziemlich weit und gut implementiert ist!) – bobince

+0

Alles klar, mein Fehler, aber es ändert nichts an der Tatsache, dass es noch nicht gut implementiert ist, weil die "Welt des IE", wie du es nennst, immer noch eine große Welt ist, mit der man sich heutzutage befassen muss. –

1

Sie arbeiten für mich in IE7 (beide Formen, mit und ohne Anführungszeichen).

Vielleicht gibt es einen anderen Selektor, der Ihre maskiert. Sie könnten versuchen, Ihre Wähler präziser, um die es mehr Priorität zu geben, z.B .:

body form input[type="button"] { 
background: red; 
} 
8
input[type="button"]{ text-align:center; } 

Was erwarten Sie, das zu tun? Der Text in einer <input type="button"> ist standardmäßig bereits zentriert.

Wenn Sie die Schaltfläche selbst innerhalb des übergeordneten Elements ausrichten möchten, müssen Sie text-align auf dem übergeordneten Element, nicht die Schaltfläche festlegen.

Attributselektoren - mit oder ohne Anführungszeichen - funktionieren mit IE7. Es ist IE6, das ist der Problem Browser dort.

3

Ich hatte keine Probleme, CSS-Anweisungen wie das Arbeiten in IE7 zu bekommen; IE6 ist immer das Problem, aber ich glaube, dass dieses CSS dort auch funktionieren würde. Also ich denke nicht IE7 ist das Problem.

Die erste Sache ist, dass Ihr CSS-Beispiel nur auf Schaltflächen wirkt, es hat keinen Einfluss auf die Übergabeschaltflächen. Aber das ist eine einfache Lösung; ändern Ihre CSS:

input[type="submit"], input[Type="button"] 
{ text-align: center; } 

Zweitens, wie Manolo Santos sagte, könnten Sie eine andere CSS-Anweisung haben, die den text-align Einstellung überschreibt? Eine Einstellung nur für Eingabeelemente?Es lohnt sich wahrscheinlich, ein Entwicklerwerkzeug wie Firebug oder die in Chrome oder IE8 integrierten Entwicklerkomponenten zu verwenden, um das CSS-Problem zu finden.

0

Diese Frage ist alt, aber wenn jemand ein ähnliches Problem hat .. Ich gebe ein paar Minuten versucht, ein ähnliches Problem

Eingang zu lösen [type = „Submit“] nicht auf IE7 funktioniert (trotz des IE den Stil korrekt der Eingabe zuordnen, wie ich es in Dev-Tools gesehen habe).

LÖSUNG: Ich wechselte von Senden bis senden und es hat funktioniert!

Ich postete dies hier, weil es jemand beim Debuggen helfen kann.

0

Aus irgendeinem Grund gibt es Zeiten, in denen Attributselektoren nicht angewendet werden, bevor die Seite in IE7 angezeigt wird. Das ist mir gerade passiert. Meine Auswahl war table[bgColor="#c0c0c0"] und würde nicht beim Laden der Seite gelten. Seit ich IE9 benutzt habe (Browser Mode: IE7, Document Mode: IE7 Standards), konnte ich mit F12 Developer Tools meine CSS-Datei anschauen. Ich habe den Selektor deaktiviert und dann erneut überprüft. Die Attribute, die danach angewendet werden. Dies ist genau in guten alten IE7 reproduzierbar, so dass ich eine Umgehung finden muss. (Hinweis: Weder die Verwendung von einfachen, doppelten oder keinen Anführungszeichen noch Variationen der Groß-/Kleinschreibung wirken sich hier aus.)

1

Ich bin mir ziemlich sicher, dass sich alle der Tatsache bewusst sind, dass die Lösung zum Hinzufügen eines! DockType zum Header nicht ' t eine Möglichkeit die ganze Zeit.

Zum Beispiel entwickle ich in DotNetNuke (DNN) Umgebung, die der Entwickler keinen Zugriff auf den Header hat. Dann macht es fast unmöglich, DocType hinzuzufügen!

In diesem Fall haben Sie nicht zu viel von einer Option, außer dass Sie eine CSS-Klasse auf die Schaltfläche beziehen und explizit darauf im CSS-Modul verweisen.

Verwandte Themen