Для админки делаю интерфейс на своих виджетах, ради эксперимента вложил панель настроек в выпадающее меню, везде работает как надо а в IE8 при наведении курсора на выпадающий
OPTION контейнер теряет псевдосвойство
:hover.
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=8"> -->
<meta http-equiv="Cache-Control" content="no-cache" />
<title>test</title>
<style>
.widget {
padding:3px 6px 3px 6px;
margin:0px;
font-family:Arial;
font-size:14px;
background-color:#eee;
color:black;
cursor:default;
border:1px solid #c0c0c0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.widget.dropdown-menu {
position:relative;
display:inline-block;
}
/* выпадающая часть меню */
.widget.dropdown-menu .dropdown-menu-container{
position:absolute;
top:100%;
left:-1px;
padding:2px 0px 2px 0px;
background-color:inherit;
display:none;
border:solid #c0c0c0;
border-radius:0px 0px 3px 3px;
border-width:1px 1px 1px 1px;
}
/* элементы меню */
.widget .menu-item , .widget .dropdown-item{
display:inline-block;
width:100%;
border-radius:0px;
background-color:inherit;
border:solid transparent;
border-width: 0px;
}
/* эффект наведения курсора на элемент меню */
.widget .menu-item:hover, .widget .dropdown-item:hover{
text-decoration:underline;
}
/* корректировка выпадающей части вложенных уровней */
.widget .dropdown-item .dropdown-menu-container{
left:100%;
top:0px;
border:1px solid #c0c0c0 ;
border-radius:3px;
}
/* показ выпадающей части при наведении курсора */
.widget.dropdown-menu:hover > .dropdown-menu-container{
display:block;
}
.widget.dropdown-menu .widget.setting-container{
border:0px;
}
</style>
</head>
<body>
<div class="widget dropdown-menu" widget="0.6270679520297223">
DropDownMenu
<div class="dropdown-menu-container">
<div class="widget setting-container" widget="0.5663612022815363">
setting-container
<div class="widget setting-item select" widget="0.6294933507148799">
select :
<select size="1">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
</select>
</div>
<div class="widget setting-item checkbox" widget="0.4132099144683906">
<input type="checkbox">
<label>checkbox</label>
</div>
<div class="widget setting-item textbox" widget="0.9582824220014653">
textbox :
<input>
</div>
</div>
</div>
</div>
</body>
</html>
Думаю так оставить, хрен с ним, попробуйте кто-нибудь на IE9 и IE10, также работает? (у меня дома хрюша)
