1

我讨厌 IE7，它让我生病了。请我需要帮助，可能我做错了什么或......

这是我的CSS：

input[type='checkbox'] 
{
    opacity: 0;
    float: left;
    width: 18px;
}
input[type='checkbox'] + label {
    margin: 0;
    clear: none;
    padding: 5px 0 4px 24px;
    /* Make look clickable because they are */
    cursor: pointer;
    background: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/off.png) left center no-repeat;
}

input[type='checkbox']:checked + label {
    background-image: url(https://css-tricks.com/wufoo/themes/customradiosandcheckboxes/check.png);

html:

<input id="Field2" name="Field2" type="checkbox" class="field checkbox" checked="checked">
<label class="choice" for="Field2">First Choice</label>
<br><br>
<input id="Field3" name="Field3" type="checkbox" class="field checkbox">
<label class="choice" for="Field3">Second Choice</label>
<br><br>
<input id="Field4" name="Field4" type="checkbox" class="field checkbox">
<label class="choice" for="Field4">Third Choice</label></body>

IE9 视图：

在此处输入图像描述

IE7 和 IE8

在此处输入图像描述

我发现有人说它应该与“selectivizr.js”一起使用更详细的儿子这个网站“ http://selectivizr.com/ ”

我按照他们的指示做了：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

这并没有解决问题。

如果有人想尝试一下，我创建了这个小提琴！http://jsfiddle.net/6mUWk/

4

3 回答 3

2

IE:checked从版本9开始支持伪类。使用 JavaScript 跟踪检查字段的状态并将样式应用于常规类。

或者，在旧的 IE7/8 中使用常规表单控件时，仅对 IE9+ 使用自定义表单控件。例如，可以使用条件注释来实现 IE 版本的这种分离。

于 2013-03-20T19:10:41.297 回答
0

感谢所有尝试过的人！

然而，到目前为止，我想最好的解决方案只是在 jQuery 的帮助下：

https://code.google.com/p/jquery-checkbox/

它简单干净！

我测试了它，它支持我需要的所有浏览器！

于 2013-03-20T20:57:08.243 回答
-1

凯文的评论是正确的。SELECT、RADIO 和 CHECKBOX 的行为不像标准的 HTML 元素，而是依赖于平台。XP 上的复选框与 Win7 或 MACOS 上的复选框不同。

您可能需要考虑使用隐藏的表单字段并使用基于 JavaScript 的替换来完成您想要做的事情。

基于：jquery select checkbox by div

$(function() {
     $('.someWrapper').toggle(
       function(event) {
         $(this).find('input').prop('checked', true);
       },
       function(event) {
         $(this).find('input').prop('checked', false);
       }
     );
 });
于 2013-03-20T19:08:13.590 回答