编辑:这个问题已经解决了。@jerome.s 评论帮助我缩小搜索范围,阅读问题底部的编辑。
我发现一个问题不仅仅影响 Chrome(在 Chrome、Firefox、Safari、IE9/8/7 上测试),但真正让我抓狂的是它不会在所有网站上发生。
为无线电输入的容器提供背景会导致输入上出现一个小的白色背景框,但是任何 CSS 都没有添加此背景,我使用在 twitter 引导页面上找到的一些代码创建了一个小提琴:
小提琴描绘问题:http: //jsfiddle.net/DMFca/1/
复制问题的替代代码:
<div style="background-color:lightblue">
<input type="radio"/>
</div>
我的 Chrome 上小提琴的结果(25.0.1364.172 和 26.0.1410.43):
问题是,在我向包含无线电输入的任何表单添加背景后,代码在引导站点 ( 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 文本别名在 CSS3 动画期间变得很奇怪)导致了我的错误。