单选按钮上的白框,只有铬,不是所有网站

时间:2013-04-02 10:45:37

标签: html css google-chrome radio-button

编辑:这个问题已经解决了。 @jerome.s comment帮助我缩小搜索范围,阅读问题底部的编辑内容。

我发现了一个问题,而不仅仅影响了Chrome(在Chrome,Firefox,Safari,IE9 / 8/7上测试过),但真正让我发疯的是它并没有在所有网站上发生。

为无线电输入的容器提供背景会导致输入上出现一个小的白色背景框,但是这个背景没有被任何CSS添加,我使用在twitter bootstrap页面上找到的一些代码创建了一个小提琴:

小提琴描绘问题:http://jsfiddle.net/DMFca/1/

复制问题的替代代码:

<div style="background-color:lightblue">
  <input type="radio"/>
</div>

Chrome浏览器的结果(25.0.1364.172和26.0.1410.43): enter image description here

问题是,在向包含无线电输入的任何表单添加背景后,代码在bootstraps站点(http://twitter.github.com/bootstrap/base-css.html#forms)中的行为方式不同。我有一些其他网站没有发生这个问题。

我尝试禁用影响无线电及其最近容器的所有CSS以尝试发现“修复”,但是尽管没有应用CSS,它仍会继续(正确)表现不同。

一旦所有CSS被禁用,我将输入的计算样式与我自己有问题的输入进行比较,它们完全相同,这让我相信它可能是doctype,一些魔术元标记或者一些奇怪的行为。容器影响输入,但也没有成功。

这个问题可以很容易地复制,我知道一些不会发生的情况(所以我假设有一个修复),但我无法找到它。相同的浏览器和(显然)相同的代码有不同的结果。

PS:我发现Chromium的错误报告描述了一种非常相似的行为,但相对较旧并且据称是固定的

编辑:将chrome更新为26.0.1410.43,问题仍然存在

EDIT2:在iframe外面查看小提琴似乎可以修复它,但我的初始问题仍然存在,会尝试再次复制问题并更新问题

EDIT3:在看到iframe导致其自身的不同错误后,我专注于试图弄清楚究竟是什么导致我的原始问题,我最终禁用每个影响无线电输入的css规则及其所有父母一个接一个,直到我找到了罪魁祸首:

body {
  -webkit-backface-visibility: hidden
}

这个“修复”错误(Webkit text aliasing gets weird during CSS3 animations)会导致我的错误。

3 个答案:

答案 0 :(得分:0)

在Mac上的chrome看起来很好......也许你可以尝试在输入元素上设置透明度?

input {background: transparent;}

http://jsfiddle.net/DMFca/2/

答案 1 :(得分:0)

尽管在iframe中显示无线电输入时似乎存在一个错误(如jerome.s所述),我自己的问题是由修复webkit文本别名错误引起的:

body {
  -webkit-backface-visibility: hidden
}

可在此处找到此“错误修复”:Webkit text aliasing gets weird during CSS3 animations

删除此行后,问题就解决了,并且未检测到上述链接中标识的行为。

答案 2 :(得分:0)

我曾经遇到过这个问题。这太痛苦了!

我的问题是不正确的溢出:隐藏应用于父级。

尝试使用Chrome检查器将每个级别的级别提升到根级别,然后当您看到它正常时,这意味着问题位于您上次退出的父级别。