chrome のオプションを使用してフォームのスタイルを設定しました。これは、花火、webkit ナイトリー ビルド、IE10、および組み込みブラウザーの coda でも正常に動作します。サファリで奇妙なバグを発見しました。事前にチェックされたオプションをロードすると、次のよう に表示されます: オプションを変更する前にすべての Webkit ブラウザとサファリで表示
「プロ」オプションを選択した後、ラベルの背景色とテキスト色の半分だけが奇妙に変更されます。これはサファリでのみ発生し ます。別のオプションを選択した後のサファリ
input="option" フィールドを非表示にしないと、問題なく表示されます。
ただし、オプション入力自体は表示したくありませんが、ラベルのみを表示します。
display:none から、箱から出して絶対に配置することから、visibility: hidden、Option-width や height を 0px にするなどのハックまで、すべてを試しました。
たまたまこれに遭遇し、解決策または回避策を見つけた人はいますか?
現在の HTML コードは次のようになります。
<div id="modules">
<fieldset class="pd3m gr group_modul">
<div class="g3 option">
<input id="Customer_modul_basic" value="basic" checked="checked" type="radio" name="Customer[modul]" />
<label for="Customer_modul_basic">Basic</label><div class="sub">
現在の CSS:
.option label {
border-bottom: 1px solid grey;
display: block;
padding: 7px 15px 4px;
font-size: 20px;
line-height: 32px;
}
.option input[type="radio"] {
display: none;
}
.option input[type="radio"]:checked + label {
background: #b8c102;
-webkit-box-shadow: 0px 4px 0px 0px #888f01;
-moz-box-shadow: 0px 4px 0px 0px #888f01;
box-shadow: 0px 4px 0px 0px #888f01;
border-bottom: 1px solid #888f01;
color: white;
text-shadow: 0px 4px 0px #888f01;
編集、この場合の解決: バグを回避できました。この特定のユースケースでは、Safari で「transition: all」に問題があったようです。トランジションに含める属性を指定し、「すべて」を削除すると、正常に機能しました。ほとんどの場合、これでうまくいくと思います。この場合、トランジションで問題を引き起こす属性があるはずですが、それは言えません。
誰かがこれと同じ問題を抱えている場合は、トランジションで何が必要かを正確に指定してください。