.table-cellと.tableの表示がIE上で正常に動作しない

Question

IEブラウザでは.tableと.table-cellの表示に問題があるようです（Chromeで正常に動作します）。

これは（それがどのように見えるべきか）それはChromeでどのように見えるかです：

ここでは、IEブラウザ（9以上）にどのように見えるかです。 セルは、互いに隣接して配置されていない、それらは互いに下方に配置されている：

<div class="Tab"> 
    <div class="row"> 
     <input type="button" runat="server" class="Tabbutton iconInterview TabbuttonActive" /> 
     <input type="button" runat="server" class="Tabbutton iconScore " /> 
     <input type="button" runat="server" class="Tabbutton iconInfo" /> 
     <input type="button" runat="server" class="Tabbutton iconActions" /> 
    </div> 
</div> 

ここ

CSS要素である：

.Tab 
{ 
    width:100%; 
    height:40px; 
    display:table; 
} 
.Tabbutton 
{ 
    height:40px; 
    background-color:#EDEDED; 
    display:table-cell; 
    width:25%; 
    border-top:none; 
    border-right:none; 
} 
.TabbuttonActive { 
    border-bottom:none; 
    background-color:white; 
} 
.row{display:table-row;} 

ここ

がHTMLであります

Answer 1

display: tableおよびdisplay: table-cellは、IE11からサポートされています。http://caniuse.com/#search=table-cell

私はあなたのケースを知らないのですが、これらのボタンで何をしたいですか？単純なdisplay: blockとfloat: leftを使用することは可能でしょうか？私はむしろ、それぞれのボタンにdiv要素を使用しないで

.Tab 
 
{ 
 
    width:100%; 
 
    height:40px; 
 
    display:block; 
 
} 
 
.Tabbutton 
 
{ 
 
    height:40px; 
 
    background-color:#EDEDED; 
 
    display:block; 
 
    width:100%; 
 
    border-top:none; 
 
    border-right:none; 
 
} 
 
.TabbuttonActive { 
 
    border-bottom:none; 
 
    background-color:white; 
 
} 
 
.btnCol { 
 
    width: 25%; 
 
    float: left; 
 
    display: block; 
 
} 
 
.row::after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
}

<div class="Tab"> 
 
    <div class="row"> 
 
     <span class="btnCol"> 
 
      <input type="button" runat="server" class="Tabbutton iconInterview TabbuttonActive" /> 
 
     </span> 
 
     <span class="btnCol"> 
 
      <input type="button" runat="server" class="Tabbutton iconScore " /> 
 
     </span> 
 
     <span class="btnCol"> 
 
      <input type="button" runat="server" class="Tabbutton iconInfo" /> 
 
     </span> 
 
     <span class="btnCol"> 
 
      <input type="button" runat="server" class="Tabbutton iconActions" /> 
 
     </span>       
 
    </div> 
 
</div>