jQuery 移动自定义样式水平响应菜单

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

FF & Chrome:

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 */
}

这似乎是一个与最大宽度或显示相关的问题：块，但我无法解决这个问题。

这里的问题在哪里？

Fiddle: https://jsfiddle.net/p7es287b/3/

Answer 1

我就是这样解决的：我根据 jQuery 移动演示 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 不均匀的零星问题消失了。

jQuery 移动自定义样式水平响应菜单

jQuery Mobile custom styled horizontal responsive menu

css

internet-explorer

jquery-mobile

internet-explorer-11