Hintergrundfarbe auf input type=button :hover-Zustand-sticks im IE

Ich habe ein input type=button mit einer Hintergrundfarbe und eine andere auf :hover - siehe http://jsfiddle.net/hc2Eu/3/

Im IE (alle Versionen) - wenn ich die Maus unten auf die Schaltfläche, bewegen Sie die Taste, dann mouseup - die hintergrund-Farbe bleibt in der :hover-Einstellung, bis Sie mit der Maus über es wieder.

Gibt es eine Abhilfe für dieses? Vorzugsweise nicht mit js? (IE6 nicht notwendig)

InformationsquelleAutor ScottR | 2011-04-11
  1. 13

    Gibt es vielleicht einen fix zu <input type="button"> - aber wenn es ist, ich weiß es nicht.

    Ansonsten, eine gute Wahl zu sein scheint, ersetzen Sie es mit einem durchgestylten a element.

    Beispiel: http://jsfiddle.net/Uka5v/

    .button {
    background-color: #E3E1B8; 
    padding: 2px 4px;
    font: 13px sans-serif;
    text-decoration: none;
    border: 1px solid #000;
    border-color: #aaa #444 #444 #aaa;
    color: #000
}

    Daseins-Berechtigung beinhalten, dass der a element Stil konsequent zwischen verschiedenen (älteren) Versionen von Internet Explorer ohne zusätzliche Arbeit, und ich denke, mein link sieht besser aus als, der button 🙂

    • Ich hatte gedacht - aber ich bin den Umgang mit einer bereits bestehenden system, das hatte Logik zugeordnet input-Elemente und form-Beiträge, etc. (bitte Fragen Sie nicht nach Einzelheiten 🙂 Refactoring alle, dass code nur fix ein IE-glitch könnte es sich nicht lohnen.
    • Geben Sie die akzeptierten Antworten - denn ich glaube nicht, dass dies möglich ist, mit standard-button-Elemente.
    • Verläufe und übergänge funktionieren nicht zusammen, scheint die einzige Antwort: stackoverflow.com/questions/3790273/...
    InformationsquelleAutor thirtydot
  2. 7

    Versuchen, mit den type Attribut-Selektor-Tasten zu finden (vielleicht werden es beheben zu):

    input[type=button]
{
  background-color: #E3E1B8; 
}

input[type=button]:hover
{
  background-color: #46000D
}
    • Es ist keine CSS-Auswahl-Ausgabe - die Farben sind richtig angewendet. Es gibt einige Problem mit dem verschieben der Maus aus der Schaltfläche, wenn der es ist im aktiven Zustand - das gleiche problem mit <button>.
    • Hmm. Ich denke, es ist Zeit zu schlagen Sie den computer und Schreien obsceneties, da bin ich mir nicht sicher, wie Sie Sie zu trick, IE, dies zu tun.
    InformationsquelleAutor Blender
  3. 1

    Müssen Sie sicherstellen, dass Bilder, die zuerst kommen und setzen Sie ein Komma nach dem Bild im hintergrund rufen. dann ist es tatsächlich funktioniert:

        background:url(egg.png) no-repeat 70px 2px #82d4fe; /* Old browsers */
background:url(egg.png) no-repeat 70px 2px, -moz-linear-gradient(top, #82d4fe 0%, #1db2ff 78%) ; /* FF3.6+ */
background:url(egg.png) no-repeat 70px 2px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d4fe), color-stop(78%,#1db2ff)); /* Chrome,Safari4+ */
background:url(egg.png) no-repeat 70px 2px, -webkit-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* Chrome10+,Safari5.1+ */
background:url(egg.png) no-repeat 70px 2px, -o-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* Opera11.10+ */
background:url(egg.png) no-repeat 70px 2px, -ms-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82d4fe', endColorstr='#1db2ff',GradientType=0 ); /* IE6-9 */
background:url(egg.png) no-repeat 70px 2px, linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* W3C */
    InformationsquelleAutor Jason Paul
Schreibe einen Kommentar