jQuery Mobileカスタムスタイルの水平応答メニュー

Question

コントロールグループといくつかのチェックボックス（事前に拡張されていますが、質問には関係ありません）で構築されたカスタムスタイルの水平メニューを作成しようとしています。私は必要なもの は、大画面のためのモバイル画面と固定最大幅1つのだけの行に水平弾性メニューです：

<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で奇妙な振る舞いこれは私のブラウザのターゲットにまだある（私は他のより最近のエッジのバージョンでそれをテストしないでください）：

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

ITSは、最大幅や表示に関する問題と思われる：ブロックを、しかし、私はこの問題を解決することはできませんよ。

ここで問題はありますか？

フィドル：https://jsfiddle.net/p7es287b/3/

Answer 1

私はそれを解決した方法は次のとおりです。 私はjQueryのモバイルデモ1.4.5に応じてマークアップを変更 - もcontrolgroupプリレンダリングすることができます

<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> 

スタイル：私は今コントロールグループコントロールのmax-widthではなくwidthを使用しています。

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

IEの不均一な散発的な問題はなくなりました。