无线电切换功能无法在Chrome v18和IE9中使用

时间:2014-10-29 17:48:08

标签: html css internet-explorer google-chrome cross-browser

我有一个切换,它不能很好地与IE9或旧版Chrome(我们支持)一起玩。我无法理解为什么它不起作用。这是Jsfiddle,您可以在现代浏览器中看到它正常工作。我使用的唯一可疑的选择器是:before和:checked,但那些至少应该在Chrome 18中使用。http://jsfiddle.net/ozoeh1sp/

<div class="radio-group">
  <input id="opt_1" class="radio-group__option" type="radio" name="opt" checked="checked">
  <label class="radio-group__label" for="opt_1">
    Toggle 1
  </label>

  <input id="opt_2" class="radio-group__option" type="radio" name="opt">
  <label class="radio-group__label" for="opt_2">
    Toggle 2
  </label>

我错过了什么?

1 个答案:

答案 0 :(得分:0)

您可以使用translateX代替translate3d来协调差异。您还需要在基础元素上设置box-sizing: border-box。最后,您需要一些旧的供应商前缀。我已经进行了这些调整,现在它似乎在Internet Explorer 9和Chrome v18中按预期工作。

小提琴:http://jsfiddle.net/ozoeh1sp/8/