IE7 CSS / Jquery bug (подсветка отрицательного поля и наведения мыши)

Question

У меня есть форма, и визуально я бы хотел, чтобы все радиокнопки отображались по одной на строку, например:

[]Yes
[]No

вместо отображения по умолчанию, например:

[]Yes []No

Вот CSS, который я использую для этого (я пропустил посторонние части):

input.radio
{
    display:block;   
}

label.choice
{
    display: block;
    margin:-1em 0 0 25px;
}

и соответствующий HTML:

<ul>
        <li>
            <input name="yn1" id="y1" class="radio" type="radio" value="yes"  />
            <label class="choice">Yes</label>

            <input name="yn1" id="n1" class="radio" type="radio" value="no"  />
            <label class="choice">No</label>

        </li>
</ul>

Мои целевые браузеры (IE7 +, FF3 +), и он отлично работает на всем вышеперечисленном.

Но затем у меня есть другая особенность, я хочу выделить фон текущего выбранного вопроса формы.Все мои вопросы о форме - это элементы списка, так что это кажется достаточно простым, добавьте немного CSS, чтобы установить цвет фона при наведении мыши / мышке.

Вот CSS и JQuery для выделения:

.highlighted {
    background-color: yellow;
}

$("li").mouseover(function () { 
    $(this).addClass('highlighted'); 
});

$("li").mouseleave(function () { 
    $(this).removeClass('highlighted'); 
});

Это также отлично работает во всех моих целевых браузерах.

НО ... Когда я объединяю эти две частивместе в то же самое время он взрывается под IE7, и переключатели исчезают, когда появляется выделение, что делает форму совершенно непригодной для использования.

Помогите!Это возможно?Как я могу это исправить, чтобы обе эти функции работали одновременно?

Answer 1

Это была проблема:

label.choice{
    margin:-1em 0 0 25px;
}

IE7 не нравится отрицательное поле -1em. Чтобы получить желаемый макет, удалите display:block и оберните каждую пару ввода / метки вместо div. Кроме того, вы можете использовать css для отображения при наведении курсора, поскольку вы не поддерживаете IE6 (победа!)

Демо: http://jsfiddle.net/mjcookson/KtUvp/9/

HTML

<ul>
     <li>
          <div class="form-item">
              <input name="yn1" id="y1" class="radio" type="radio" value="yes" />
              <label class="choice">Yes</label>
           </div>
           <div class="form-item">
               <input name="yn1" id="n1" class="radio" type="radio" value="no" />
               <label class="choice">No</label>
           </div>
     </li>
</ul>

CSS

input.radio{
}

label.choice{
  margin-left:25px 
}
.form-item{width:300px}
ul li:hover{background:yellow}