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 のバグ レポートを見つけましたが、比較的古く、修正されたと思われます。

編集: クロムを 26.0.1410.43 に更新しましたが、問題はまだ存在します

EDIT2：iframeの外側でフィドルを表示すると修正されるようですが、最初の問題がまだ存在し、問題を再度再現して質問を更新しようとします

EDIT3：iframeが独自の別のバグを引き起こしていることを確認した後、元の問題の原因を正確に突き止めようとすることに焦点を当て、ラジオ入力とそのすべての親に影響を与えるすべてのcssルールを1つずつ無効にして、犯人：

body {
  -webkit-backface-visibility: hidden
}

このバグの「修正」( CSS3 アニメーション中に Webkit のテキスト エイリアシングがおかしくなる) がバグの原因です。

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
}

この「バグ修正」は次の場所にあります: CSS3 アニメーション中に Webkit テキストのエイリアシングがおかしくなる

この行が削除されると、問題は解決され、上記のリンクで特定された動作は検出されませんでした。

于 2013-04-03T10:17:38.780 に答える