Или IE8 глючит или так сойдет
Для админки делаю интерфейс на своих виджетах, ради эксперимента вложил панель настроек в выпадающее меню, везде работает как надо а в 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, также работает? (у меня дома хрюша) |
Часовой пояс GMT +3, время: 15:46. |