3

编辑:这个问题已经解决了。@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 动画期间变得很奇怪)导致了我的错误。

4

3 回答 3

0

在 mac 上的 chrome 上看起来不错...也许您可以尝试在输入元素上设置透明?

input {background: transparent;}

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

于 2013-04-02T13:57:21.523 回答
0

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

body {
  -webkit-backface-visibility: hidden
}

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

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

于 2013-04-03T10:17:38.780 回答
0

我曾经遇到过这个问题。那是……痛苦!

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

尝试使用 Chrome 检查器将您的无线电节点逐级向上移动到根目录,因此当您看到它没问题时,这意味着问题位于您上次退出的父级别。

于 2013-10-30T17:43:26.690 回答