jQuery Mobile 自定义样式的水平响应菜单答案

【问题标题】：jQuery Mobile custom styled horizontal responsive menujQuery Mobile 自定义样式的水平响应菜单
【发布时间】：2016-06-03 20:36:58
【问题描述】：

我尝试创建一个自定义样式的水平菜单，其中包含一个控件组和一些复选框（它是预先增强的，但对问题无关紧要）。我需要的是一个水平弹性菜单，只在移动屏幕的一行上，大屏幕的最大宽度是固定的：

  <div class="color-menu">
    <div class="ui-controlgroup-controls">
      <div class="ui-checkbox">
        <input name="cl-1" id="cl-1" type="checkbox" data-corners="false" data-enhanced="true" value="electric-green" />
        <label for="cl-1" id="lab-cl-1" class="ui-btn ui-btn-inherit ui-btn-icon-left"></label>
      </div>
      ... some other choices
    </div>
  </div>

虽然这似乎在 FF 和 Chrome 中呈现完美，但它在 IE11 中表现得很奇怪，它仍然在我的浏览器目标中（我没有在其他更新的 Edge 版本中测试它）：

FF 和铬：

IE11：

这是相关的 CSS 部分：

.color-menu {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  width: 100%;
}

.color-menu .ui-controlgroup-controls {
  display: inline-block !important;
}

.color-menu .ui-controlgroup-controls .ui-checkbox {
  float: left;
  clear: none;
  max-width: 12.5%;
  /* 100%/8 */
}

这似乎是与 max-width 或 display: block 相关的问题，但我无法解决此问题。

问题出在哪里？

小提琴：https://jsfiddle.net/p7es287b/3/

【问题讨论】：

标签： css internet-explorer jquery-mobile internet-explorer-11

【解决方案1】：

我就是这样解决的：我根据 jQuery Mobile 演示 1.4.5 更改了标记 - 控制组也可以预渲染：

  <div class="color-menu">
    <div data-role="controlgroup" data-enhanced="true" class="ui-controlgroup ui-corner-all">
      <div class="ui-controlgroup-controls ui-shadow">
        <div class="ui-checkbox">
          <input name="cl-1" id="cl-1" type="checkbox" data-enhanced="true" data-corners="false" value="electric-green" />
          <label for="cl-1" id="lab-cl-1" class="ui-btn ui-btn-inherit ui-btn-icon-left"></label>
        </div>
        ...some other choices
      </div>
    </div>
  </div>

样式：我现在使用宽度而不是控制组控件的最大宽度。

.color-menu .ui-controlgroup-controls .ui-checkbox {
    float: left;
    clear: none;
    width: 12.5%; /* 100% / number of choices */
}

IE 的不均匀零星问题已经消失。

【讨论】：