jQuery Mobile自定义风格的水平响应菜单

Question

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

  <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＆amp; Chrome，它在IE11中表现得很奇怪，它仍然在我的浏览器目标中（我没有在其他更新的Edge版本中测试过它）：

FF＆amp;铬：

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/

Answer 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的零星问题已经消失。