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来设置mouseover / mouseout上的背景颜色。

这是突出显示的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}

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

1 个答案: