Question

Windows Chrome中存在一个错误，当其父级文件不在文档流程中且已应用-webkit-backface-visibility时，单选按钮的背景将变为白色。

这里有效： http://jsfiddle.net/misterkeg/uMajC/

我正在使用-webkit-backface-visiblity: hidden来解决WebKit过渡闪烁错误。

如果我使用-webkit-transform: translateZ(0)修复程序，也会出现此问题，因此只要硬件加速处于活动状态，它就会启动。

将输入的-webkit-backface-visibility覆盖为visible也无济于事。

对此有任何已知的解决方法吗？我已经提交了Chromium bug，但想知道在此期间是否有任何解决方法。

Answer 1

我发现了同样的问题，但是在不同的环境中，所以可能是-webkit-backface-visiblity不是问题，而是有几种组合。在我的情况下，当带有单选按钮的页面包含像地图这样的谷歌地图（一个专有的地图，我还没有找到地图中究竟是什么导致问题）并且显示在iframe内时，问题就出现了。如果我使用检查器隐藏地图，单选按钮看起来不错，或者我直接查看页面，而不是iframe内部。

我发现的唯一解决方法是来自CSS忍者的这个页面：http://www.thecssninja.com/css/custom-inputs-using-css。

总之，这是解决方案（从我提到的页面http://www.thecssninja.com/demo/css_custom-forms/链接了一个现场演示）：

<强> HTML

<label for="input1" class="radio_image">
 <input type="radio" name="input" id="input1" />
 <span>Option 1</span>
</label>

<强> CSS

/*we hide the real radio button*/
.radio_image input[type=radio] {
  position:absolute;opacity:0;
}
/*we assign the span a background image
  which is a capture of the actual radio button*/
.radio_image input[type=radio] + span {
  background-image: url("radio-button.gif");
  background-position: left top;
  background-repeat: no-repeat;
  padding-left: 1.6em;
}
/*if radio is checked we change the background
  image to one with a checked radio button (it can be
  done with a sprite type background too): */
.radio_image input[type=radio]:checked + span {
  background-image: url("radio-button-checked.gif");
}

由于跨度在标签内部，单击它将与单击单选按钮本身具有相同的效果，因此单选按钮仍然可以正常工作。

我正在开发环境中工作，所以我不能发布你的网址，但是上面的代码和链接我觉得很容易看到。

如果您只想定位Chrome，可以尝试此帖子中提供的解决方案： Can you target Google Chrome?

我希望它有所帮助，我不喜欢这么复杂的方式来渲染一个简单的单选按钮，在我的情况下，我已经在我的网站中唯一有问题的页面中使用它并且它工作正常。< / p>

Answer 2

更好的解决方案w / out必须使用图像：

将无线电元素包装在div中，并将div的溢出设置为隐藏，并将border-radius设置为100px。然后将无线电输入设置为显示块，没有边距。这对我有用：

标记：

<div class="radio_contain">
    <input type="radio" id="r1" name="r1">
</div>

CSS：

.radio_contain {
  display: inline-block;
  border-radius: 100px;
  overflow: hidden;
  padding: 0;
}
.radio_contain input[type="radio"] {
  display: block;
  margin: 0;
}

Answer 3

这是一种不使用图像的替代解决方案（也不是无线电css编辑）。解决方案导致单选按钮周围出现圆形白色圆圈（如果您的设计可以容忍），请尝试以下操作：

HTML：

<span class='radioWrap'><input type='radio'...></span>

的CSS：

.radioWrap{
  background-color: white;
  padding: 4px 3px 1px 4px;
  border-radius: 10px;
}

就是这样。

使用-webkit-backface-visibility时，单选按钮背景在Windows Chrome中变为白色。任何解决方法？

3 个答案: