Как исправить ошибку при наведении курсора CSS в IE7 и IE8? - PullRequest
Новая
       16

Как исправить ошибку при наведении курсора CSS в IE7 и IE8?

0 голосов
/ 10 января 2011

Я хочу реализовать эффект наведения с помощью CSS для кнопки ввода html. (Изменение цвета рамки при наведении мыши).

На самом деле технически проблем нет - и это работает - однако у меня проблемы с 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>

Заранее спасибо!

Ответы [ 3 ]

4 голосов
/ 09 февраля 2011

Копать могилы, но у меня была та же проблема с IE7 и вводом: hover.Когда я изменил тип документа на строгий, он был поддержан в IE7.JS не требуется.

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

Поддержка IE7 для наведения

0 голосов
/ 10 февраля 2011

Просто замените input[type=submit] на кнопку, и все будет в порядке.
Ваш измененный пример будет выглядеть так: 

<button class="linebutton" id="test" name="test" style="background-image: url('image');" title="Test" type="submit" value="Test">Submit</button>
0 голосов
/ 16 января 2011

Не совсем так элегантно, но, может быть, немного jQuery?

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