如何修復IE7和IE8中的CSS懸停錯誤？

我想用CSS實現一個html輸入按鈕的懸停效果。（改變鼠標懸停的邊框顏色）。如何修復IE7和IE8中的CSS懸停錯誤？

其實在技術上沒有問題 - 它正在工作 - 但是我有Internet Explorer 7以及IE8的問題，因爲效果只有80％的時間在那裏工作。

我也改變了mousecursor懸停 - 這是工作沒有問題 - 但改變邊界（或背景顏色）只有大部分時間工作。有時候我用鼠標進入按鈕並沒有任何反應。

無論如何要繞過這種行爲 - 無需使用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

沒有`onblur`會發生什麼和`onfocus`屬性？ `setFocus（）`做了什麼？ – 2011-01-10 18:55:58

JavaScript屬性是由框架插入的，它們對問題沒有影響 - 我將它們從示例中刪除！ – 2011-01-11 06:19:39

不是很優雅，但也許一些jQuery？

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

來源

2011-01-15 21:34:25 Hawxby

挖掘墳墓了，但我有同樣的問題與IE7和輸入：懸停。當我將doctype更改爲嚴格時，它支持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

只需更換您通過按鈕input[type=submit]，你應該罰款。
你的榜樣改性想是這樣的：

<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懸停錯誤？

回答

相關問題