Question

这是为了后退，不使用IE hack或让:checked元素按Android-SharedPreferences-Helper

中的答案工作

我需要删除我拥有的样式并为IE8做回退以恢复到标准单选按钮。

我怎么能这样做？

body {
  font: 16px Arial, sans-serif;
  background-color: #e0e0e0;
}

/* Hiding Radio */
input[type="radio"] {
  display: none;
}

/* switch-canvas */
.switch-canvas {
  width: 200px;
  margin: 50px auto;
  height: 40px;
  padding: 5px;
  background-color: #000;
  font-size: 0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

label.black {
  display: inline-block;
  *display: inline;
  zoom: 1;
  font-size: 16px;
  font-weight: bold;
  width: 50%;
  height: 40px;
  color: #222;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

input.black[type="radio"]:checked + label.black {
  background-color: #fff;
  color: #000;
  border-radius: 2px;
}

<div class="switch-canvas">
  <input class="black" type="radio" id="female" name="sex" checked="" />
  <label for="female" class="black">Female</label>
  <input class="black" type="radio" id="male" name="sex" />
  <label for="male" class="black">Male</label>
</div>

Answer 1

您可以通过添加css选择器来执行此操作：checked和：not（：checked）到复选框样式。 IE8及更早版本无法识别此选择器，因此浏览器将忽略这些样式，而不会隐藏复选框或显示标签的样式。

在您的示例中，您举例说明：

         /* Hiding Radio */
         input[type="radio"]:checked, input[type="radio"]:not(:checked) {
           display: none;
         }
         input[type="radio"]:checked + label.black, input[type="radio"]:not(:checked) + label.black {
           display: inline-block;
           *display: inline;
           zoom: 1;
           font-size: 16px;
           font-weight: bold;
           width: 50%;
           height: 40px;
           color: #222;
           line-height: 40px;
           text-align: center;
           cursor: pointer;
           transition: all 0.3s;
           -webkit-transition: all 0.3s;
           -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
           border-radius: 5px;
         }
        input.black[type="radio"]:checked + label.black {
           background-color: #fff;
           color: #000;
           border-radius: 2px;
        }

IE8中的单选按钮后退

1 个答案: