單選按鈕上的白框，只有鉻，不是所有的網站

Question

編輯：這個問題已經解決。 @ 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> 

在我的瀏覽器（25.0.1364.172和26.0.1410.43）小提琴的結果：

問題是，代碼在bootstraps站點（http://twitter.github.com/bootstrap/base-css.html#forms）中的行爲方式與我在包含無線電輸入的任何窗體中添加背景後不同。我有其他網站，這個問題不會發生。

我試過禁用所有影響收音機及其最近的容器的CSS，試圖發現「修復」，但它仍然表現不同（正確），儘管沒有應用CSS。

一旦所有CSS被禁用，我將輸入的計算樣式與我自己有問題的輸入進行比較，它們完全相同，導致我相信它可能是文檔類型，一些魔術元標記或一些奇怪的行爲容器影響輸入，但在那裏也沒有成功。

這個問題可以很容易地複製，我知道一些情況下，它不會發生（所以我假設有一個修復），但是我不能找到它。相同的瀏覽器和（顯然）相同的代碼有不同的結果。

PS：我發現了鉻的bug報告描述了一個非常類似的行爲，但相對較老，也應該固定

編輯：更新了Chrome瀏覽器26.0.1410.43，問題依然存在

EDIT2：查看小提琴外部的iframe似乎修復它，但我最初的問題仍然存在，將嘗試再次複製問題，並更新問題編輯3：在看到iframe導致其自身不同的錯誤後，我專注於試圖究竟是什麼導致了我原來的問題，我終於禁用了影響無線電輸入ŸCSS規則和所有的家長逐一直到我找到了罪魁禍首：

body { 
    -webkit-backface-visibility: hidden 
} 

這種「修復」一個bug（Webkit text aliasing gets weird during CSS3 animations）導致我的錯誤。

Answer 1

儘管一個bug似乎iframe內顯示無線輸入時（如jerome.s提到的）我自己的問題正在被修復到WebKit的文本走樣錯誤導致存在的事實：

body { 
    -webkit-backface-visibility: hidden 
} 

這種「錯誤修復」可以在這裏找到：Webkit text aliasing gets weird during CSS3 animations

一旦該行被刪除的問題得到解決和沒有檢測到上述鏈接中標識的行爲。

Answer 2

它在Mac上的鉻看起來很好...也許你可以嘗試設置透明的輸入元素？

input {background: transparent;} 

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

Answer 3

我曾經有過這個問題。這是......痛苦！

我的問題是一個不正確的溢出：隱藏應用在父項中。

嘗試使用Chrome檢查器級別將每個級別的電臺節點升級到根級，因此，當您看到它確定時，這意味着問題位於您上次退出的父級級別。