1

まず最初に、これに IE を含める唯一の理由は、問題をレンダリングできる唯一のブラウザーであることです。私の考えたプロセスは、IE で表示の問題を修正できれば、モバイル デバイスで自動的に解決されるだろうというものでした。

問題は、ラジオ ボタンを左に揃える必要があることです。私が直面している頭痛の種は、コードの HTML 構造を変更する機能がないため、これを CSS で機能させる必要があることです。これをモバイル用に最適化しているため、HTML を変更すると、他の何百ものコードに影響を与える可能性があります。したがって、ページの HTML 構造を変更しないように言われました。どのような種類のセマンティクスが窓の外に投げ出されますか。誰かがこのコードで何が起こっているのかを正確に理解するのを手伝ってくれれば、ほとんどのデスクトップ ブラウザーで正しく表示されますが、IE、Android、iOS では正しく表示されません。

問題

入力とスパンに影響を与える唯一の CSS は次のとおりです。

.mobile .formBound span {
  display: block;
 }

.mobile form span, .mobile form input {
  margin: 0 auto;
}

.mobile .formBound input {
  float: left;
}

これは、要素の HTML 構造です。

<div class="g3 group_3" id="tabindex_11">
    <div style="width:inherit;">
        <span class="field_label" id="field_label_donateCharity">How much would you normally be willing to donate to charity every year?:</span>
        <span class="requiredField">*</span>
    </div>
    <input type="radio"  name="donateCharity" id="donateCharity" class="offerRadioButton {required:true}" value="Less than $10">
    <span class="radioCaption">Less than $10</span>
    <input type="radio"  name="donateCharity" id="donateCharity" class="offerRadioButton {required:true}" value="$10-$100">
    <span class="radioCaption">$10-$100</span>
    <input type="radio"  name="donateCharity" id="donateCharity" class="offerRadioButton {required:true}" value="$101-$200">
    <span class="radioCaption">$101-$200</span>
    <input type="radio"  name="donateCharity" id="donateCharity" class="offerRadioButton {required:true}" value="$201-$500">
    <span class="radioCaption">$201-$500</span>
    <input type="radio"  name="donateCharity" id="donateCharity" class="offerRadioButton {required:true}" value="$501 or more">
    <span class="radioCaption">$501 or more</span>
</div>

この時点で、この問題はコードの HTML 構造に関係していると確信しています。

これをモバイル デバイスで適切に表示するにはどうすればよいか、何か提案はありますか?

4

3 に答える 3

1

この問題は、次のスタイルが原因です。

.mobile .formBound input {
  float: left;
}

マークアップを変更できないため、これを修正するのは困難です。「:after」疑似セレクターを試してフロートをクリアすることをお勧めします。このようなもの：

span.radioCaption:after {
   content: " ";
   clear: both;
}

IE で問題を再現する JSFiddle を含めていただけると助かります。

于 2012-05-11T00:14:31.157 に答える
0


ここでの解決策は、要素を見つけて各要素の後にタグを設定する小さなスクリプトになりました

于 2012-05-22T23:17:19.427 に答える
0

構造や CSS ルールの詳細を確認せずに言うのは難しいです。入力フロート ルールに !important を追加しようとしましたか?

于 2012-05-11T00:12:37.527 に答える