Wie behebt man CSS-Hover-Bug in IE7 und IE8?

Ich möchte einen Hover-Effekt mit CSS für eine HTML-Eingabeschaltfläche implementieren. (Ändern der Rahmenfarbe beim Überfahren der Maus).Wie behebt man CSS-Hover-Bug in IE7 und IE8?

Eigentlich technisch kein Problem - und es funktioniert - allerdings habe ich Probleme mit dem Internet Explorer 7 sowie IE8, weil der Effekt dort nur zu 80% funktioniert.

Ich ändere auch die Mauscursor auf Hover - die funktioniert ohne Probleme - aber die Änderung der Grenze (oder die Hintergrundfarbe) funktioniert nur die meiste Zeit. Manchmal gebe ich den Knopf mit der Maus ein und nichts passiert.

Ist es trotzdem möglich, dieses Verhalten zu umgehen - ohne JavaScript oder Code-Blowing-Wrapper-Elemente zu verwenden?

Siehe den folgenden Beispiel-Code für Details:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html id="document:html" lang="de"> 
<head><meta content="0" http-equiv="expires" /><meta content="text/html; charset=iso-8859-1" http-equiv="content-type" /> 
<style type="text/css"> 
input.linebutton { 
    border: 1px solid #BBB; 
    margin: 0 2px; 
    background-color: #EEE; 
    text-align: left; 
    background-position: 2px 2px; 
    background-repeat: no-repeat; 
    padding: 1px 3px 1px 23px; 
    width: 0; /* for IE only */ 
    overflow: visible; 
    cursor:pointer; 
    height:22px; 
} 
input.linebutton:hover { 
    border: 1px solid #FF8C00; 
    background-color: #EEE; 
    outline: none; 
} 
input.linebutton:active, .linebutton:focus { 
    border: 1px solid #000000; 
    background-color: #EEE; 
    outline: none; 
} 
.linebutton[class] { /* IE ignores [class] */ 
    width: auto; 
} 
</style> 
</head> 
<body > 
<input class="linebutton" id="test" name="test" style="background-image: url('image');" title="Test" type="submit" value="Test" /> 
</body> 
</html>

Vielen Dank im Voraus!

Quelle

2011-01-10 räph

Was ohne die 'onblur' geschieht und' Attribute onfocus'? Was macht 'setFocus()'? –

Die JavaScript-Attribute wurden von einem Framework eingefügt, sie haben keinen Einfluss auf das Problem - ich entferne sie aus dem Beispiel! –

Nicht ganz so elegant, aber vielleicht ein bisschen jQuery?

jQuery("input.linebutton").hover(function() { 
    jQuery(this).addClass("HoverClassName"); 
}, function() { 
    jQuery(this).removeClass("HoverClassName"); 
});

Quelle

2011-01-15 21:34:25 Hawxby

Gräber graben, aber ich hatte das gleiche Problem mit IE7 und Eingabe: Hover. Als ich den Doctype auf strict änderte, war es dann Unterstützung in IE7. Keine js benötigt.

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

IE7 support for hover

Quelle

2011-02-09 14:42:20 whitespy9

Fügen Sie dieses DOCTYPE hinzu, damit alle Schriftarten auf meiner Seite größer werden, was ist los? – RRTW

Ersetzen Sie einfach Ihre input[type=submit] durch einen Knopf, und Sie sollten in Ordnung sein.
Ihr Beispiel so möchte geändert:

<button class="linebutton" id="test" name="test" style="background-image: url('image');" title="Test" type="submit" value="Test">Submit</button>

Quelle

2011-02-10 14:30:06 Knu

Wie behebt man CSS-Hover-Bug in IE7 und IE8?

Antwort

Verwandte Themen