IE, Android 및 IOS에서이 디스플레이 버그의 원인을 파악할 수 없습니다.

Question

먼저 IE를 포함하는 유일한 이유는이 문제를 렌더링 할 수있는 유일한 브라우저입니다. IE에서 디스플레이 문제를 해결할 수 있다면 모바일 장치에서 스스로 해결할 것이라고 생각했습니다.

문제는 라디오 버튼을 왼쪽으로 정렬해야한다는 것입니다. 내가 직면하고있는 두통은 코드의 HTML 구조를 변경할 수있는 능력이 없어서 CSS로이 작업을해야한다는 것입니다. 모바일 용으로 최적화했기 때문에 HTML에 대한 변경 사항은 수백 가지의 다른 페이지의 HTML 구조를 변경하지 말라고 들었습니다. 어떤 종류의 의미론이 창 밖으로 던져 지는지. 누군가이 코드를 정확히 이해할 수 있도록 도와 주면 대부분의 데스크톱 브라우저에서는 올바르게 표시되지만 IE, Android 또는 iOS에서는 올바르게 표시되지 않습니다. 입력과 지속 기간에 영향을 미치는

유일한 CSS는 여기에 있습니다 :

<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 구조는

.mobile .formBound span { 
    display: block; 
} 

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

.mobile .formBound input { 
    float: left; 
} 

문제는 코드의 HTML 구조와 관련이 있음을 지적하십시오.

모바일 장치에서 제대로 표시하려면 어떻게해야할까요?

Answer 1

이 솔루션은 여기 요소를 찾아 각 요소

Answer 2

더 많은 구조/CSS 규칙을 보지 않고 말하기가 어렵습니다. 입력 플로트 규칙에 중요한 추가를 시도 했습니까?

Answer 3

문제는이 스타일로 인해 발생 : 마크 업을 수정할 수 없기 때문에

.mobile .formBound input { 
    float: left; 
} 

이는 해결하기 힘들 것입니다. 플로트를 제거하기 위해 ": after"의사 선택기를 사용하여 실험해볼 것을 제안합니다. 다음과 같은 것 :

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

IE에서 문제를 재현하는 JSFiddle을 포함하면 도움이됩니다.