1

所以首先我在其中包含 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 结构有关。

关于如何才能让它在移动设备上正确显示的任何建议？

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

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

于 2012-05-11T00:12:37.527 回答
0

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

于 2012-05-22T23:17:19.427 回答