IE li hover не обнаружен с полями на элементе li - PullRequest
Новая
       31

IE li hover не обнаружен с полями на элементе li

0 голосов
/ 25 января 2012

Я использовал следующую CSS, чтобы создать дочерний список внутри списка, когда вы наводите курсор на родительский элемент списка. В IE7 и 8 (но не в ff и chrome) пробел между дочерними элементами li (предоставляемый полем строки: 0,25em 0 0 0;) приводит к тому, что браузер теряет указатель мыши и снова скрывает дочерний список. Как я могу это исправить? Приветствия.

CSS, я думаю, является причиной: 

#integratedSearchList li:hover > ul
{
    display: block;
}

#integratedSearchList ul
{

    display: none;
    margin: 0;
    padding: 0;

    position:absolute;

    list-style-type: none;
    text-decoration: none;
    z-index: 100;

    width:100%;
}

#integratedSearchList ul li
{
    border: 1px solid #cccccc;
    background: #ffffff;
    text-align: right;
    padding: 0.5em;
    margin: 0.25em 0 0 0;
    z-index: 100;
    height: auto;
    width:90%;
}

HTML: 

<div id="integratedSearchContainer">
  <form id="integratedSearchForm" class="integratedSearchForm" action="..." method="get" name="integratedSearchForm">
    <ul id="integratedSearchList">
      <li>
        <label for="search" class="hidden">...</label> <input name="query" id="integratedSearchInput" hint="" type="text" maxlength="100" value=""> <button id="integratedSearchbutton" type="submit" class="enablehover" title=" Search ">Go</button>
        <ul>
          <li>
            <a id="integratedAdvancedSearchHref" href="..." name="integratedAdvancedSearchHref">Advanced Search</a>
          </li>
          <li>
            <label for="seachSource1">...</label> <input id="seachSource1" name="source" type="checkbox" value="..."><br>
            <label for="seachSource2">...</label> <input id="seachSource2" name="source" type="checkbox" value="..."><br>
          </li>
        </ul>
      </li>
    </ul>
  </form>
</div>

Полный CSS: 

#integratedSearchContainer
{
    position:relative;
    float: right;
    margin: 1em 1.5em 0 0.75em;
    padding: 0;

    background: #ffffff;
}

#integratedSearchList
{
    clear: both;
    margin: 0;
    padding: 0;

    background: #ffffff;

    list-style-type: none;
    text-decoration: none;
    width: 100%;
}

#integratedSearchList li
{
    width: inherit;
}

#integratedSearchList li:hover > ul
{
    display: block;
}

#integratedSearchList ul
{

    display: none;
    margin: 0;
    padding: 0;

    position:absolute;

    list-style-type: none;
    text-decoration: none;
    z-index: 100;

    width: 100%;
}

#integratedSearchList ul li
{
    border: 1px solid #cccccc;
    background: #ffffff;
    text-align: right;
    padding: 5%;
    margin: 0.25em 0 0 0;
    z-index: 100;
    height: auto;
    width: 90%;
}

#integratedSearchList ul li:first-child > a
{
}

#integratedSearchList ul li:last-child > a
{
}

.integratedSearchForm {
    border: 1px solid #cccccc;
    background-color: #ffffff;
}

.integratedSearchForm button, .integratedSearchForm .button {
    background: transparent url(../images/button_search.gif) no-repeat center top;
    width: 17px;
    height: 17px;
    padding: 0 0 0 0;
    margin: 2px 2px 2px 2px;
    border: none;
    text-indent: -1000em;
    cursor: pointer;
}

.integratedSearchForm button:hover, .integratedSearchForm button.hover,
.integratedSearchForm .button:hover, .integratedSearchForm .button.hover {
    background-image: url(../images/button_search_feint.gif);
}

.integratedSearchForm button:disabled, .integratedSearchForm button.disabled,
.integratedSearchForm .button:disabled, .integratedSearchForm .button.disabled {
    background-image: url(../images/button_search_disabled.gif);
}

.integratedSearchForm #integratedSearchInput {
    border: none;
    margin: 2px 0.25em 2px 0.25em;
    background: #ffffff;
    width: 200px;
}

Ответы [ 2 ]

1 голос
/ 26 января 2012

В комментариях вы заявляете, что не думаете, что установлен тип документа. Вероятно, это проблема, потому что вы находитесь в режиме причуд и вы никогда не заставите IE попытаться работать так же, как другие, более современные браузеры. Добавьте правильный тип документа, например <!DOCTYPE html>, и посмотрите, не исправит ли это IE.

Если у вас нет доступа к HTML, вас ждет мир зла, поскольку теперь для этого потребуется взломать IE, чтобы превратить IE в покорность современного мира.

0 голосов
/ 26 января 2012

Почему бы вообще не избежать проблемы?Удалите поля из элементов li и сделайте их эффективно прозрачными (без полей, границ и т. Д.).Затем используйте внутренние элементы, чтобы фактически сформировать структуру вашего меню (в вашем случае это может быть div, поскольку ваше меню - это не просто ссылки).Когда у вас есть внутренние элементы, используйте их вместо них.

Может быть, что-то вроде этого: 

<ul id="integratedSearchList">
  <li>
    <div class="menu-item">
    <label for="search" class="hidden">...</label> <input name="query" id="integratedSearchInput" hint="" type="text" maxlength="100" value="">
    <button id="integratedSearchbutton" type="submit" class="enablehover" title=" Search ">Go</button>
    </div>
    <ul>
      <li> **//No margins or borders**
        <div class="menu-item"> **// Style borders, margins, etc.., here**
            <a id="integratedAdvancedSearchHref" href="..." name="integratedAdvancedSearchHref">Advanced Search</a>
        </div>
      </li>
      <li>
        <div class="menu-item">
           <label for="seachSource1">...</label> <input id="seachSource1" name="source" type="checkbox" value="..."><br>
           <label for="seachSource2">...</label> <input id="seachSource2" name="source" type="checkbox" value="..."><br>
        </div>
      </li>
    </ul>
  </li>
</ul>

Вы можете сделать это еще дальше, добавив класс CSS к каждому элементу "ul"уровень, что позволяет вам еще больше настроить класс «пункт меню».

...