IE7 CSS/jQuery的错误（阴性切缘和鼠标悬停高亮）

我有一个表格，并在视觉上我想使所有单选按钮显示每行一个，如：IE7 CSS/jQuery的错误（阴性切缘和鼠标悬停高亮）

[]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下爆炸，并且突出显示时单选按钮消失，使表单完全无法使用。

帮助！这可能吗？我如何解决这个问题，以便这两个功能同时工作？

来源

2011-09-20 Jessica Brown

类=收音机输入中缺少“收音机” – marissajmc

感谢您指出了这一点！当我删除我的示例中的一些无关部分（包括另一个不相关的具有格式化的类）时，我无意中删除了该部分。我已编辑，以纠正这一点。 –

这就是问题所在：

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}

来源

2011-09-22 02:14:50 marissajmc

IE7 CSS/jQuery的错误（阴性切缘和鼠标悬停高亮）

回答

相关问题