IE7 CSS/Jquery错误（负边距和鼠标悬停突出显示）

我有一个表单，在视觉上我想让所有单选按钮每行显示一个，如：

[]Yes
[]No

而不是默认的显示方式，例如：

[]Yes []No

下面是我用来实现这一点的CSS（我省略了无关的部分）：

以及相应的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下爆炸，当突出显示出现时，单选按钮消失，使窗体完全无法使用

救命啊！这可能吗？我如何解决这个问题，使这两个功能同时工作

这就是问题所在：

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

IE7不喜欢负-1em的边际。 要实现所需的布局，请删除

display:block

，并将每个输入/标签对包装在

div

中。此外，您还可以使用css进行悬停，因为您不支持IE6（win！）

演示：

html

---

class=“radio”在您的无线电输入中缺失感谢您指出这一点！当我删除示例中的一些无关部分，包括另一个具有格式的无关类时，我无意中删除了它。我已经修改过了。

.highlighted {
    background-color: yellow;
}

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

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

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

<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>

input.radio{
}

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