无法弄清楚在IE，Android和IOS中导致此显示错误的原因

Question

首先，我首先将IE包含在其中的唯一原因是它是唯一能够解决问题的浏览器。我的思维过程是，如果我能解决IE中的显示问题，它将在移动设备上自行解决。

问题是单选按钮需要对齐左侧。我面临的问题是我必须使用CSS来完成这项工作，因为我没有能力更改代码的HTML结构，因为我正在为移动设备优化这一点，对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结构有关。

有什么建议可以让它在移动设备上正常显示？

Answer 1

问题是由这种风格引起的：

.mobile .formBound input {
  float: left;
}

这很难解决，因为您无法修改标记。我建议尝试使用“：after”伪选择器来清除浮点数。像这样：

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

如果你包含一个在IE中重现你的问题的JSFiddle会很有用。

Answer 2

很难说没有看到更多的结构/ CSS规则。您是否尝试过将！important添加到输入浮点规则中？

Answer 3

这里的解决方案最终成为一个小脚本，可以找到元素并在每个元素之后设置一个标签