IE7とIE8のCSSホバーバグを修正するには？

html入力ボタン用のCSSでホバー効果を実装したいと思います。（マウスの境界線の色を変える）。IE7とIE8のCSSホバーバグを修正するには？

実際には技術的に問題はなく、動作していますが、Internet Explorer 7とIE8には問題があります。これは、その効果が80％のようにしか作用しないためです。

また、問題なく動作しているホバーのマウスカーソルを変更しますが、境界線（または背景色）を変更するのはほとんどの場合のみです。時々私はマウスでボタンに入り、何も起こらない。

とにかくこの動作を回避するには - javascriptやコードブローラッパー要素を使用しないでください。事前に

<!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>

ありがとう：

は、詳細については、次のコード例を参照してください！

出典

2011-01-10 räph

：
あなたの例では、変更は次のように希望ですか？ 'setFocus（）'は何をするのですか？ –

JavaScriptの属性はフレームワークによって挿入されているため、問題に影響はありません - 例から削除します！ –

かなりエレガントではないかもしれませんが、おそらくいくつかのjQueryですか？

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

出典

2011-01-15 21:34:25 Hawxby

墓地を掘るが、私はIE7と入力：ホバーと同じ問題があった。 doctypeをstrictに変更すると、IE7でサポートされました。 jsは必要ありません。

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

IE7 support for hover

出典

2011-02-09 14:42:20 whitespy9

このDOCTYPEを追加すると、ページ内のすべてのフォントが大きくなります。何が起こっているのですか？ – RRTW

だけでボタンによって、あなたのinput[type=submit]を交換し、あなたは問題ないはずです。 `onblur`と` onfocus`属性なしで何が起こる

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

出典

2011-02-10 14:30:06 Knu

IE7とIE8のCSSホバーバグを修正するには？

答えて

関連する問題