.table-cell和.table显示在IE上运行不正常

Question

我似乎在IE浏览器中显示.table和.table-cell显示有问题（在Chrome上运行正常）。

这就是它在Chrome上的外观（它应该如何看）：

以下是IE浏览器（9及更高版本）的外观。 细胞不是彼此相邻，它们位于彼此之下：

这是HTML：

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

Answer 1

IE11 http://caniuse.com/#search=table-cell

支持

import matplotlib.pyplot as plt dict_s = { 'A': [1.5, 3.6, 5.7, 6, 7, 8], 'B': [3.5, 5, 6, 8, 4, 5], 'C': [2.8, 3.5, 4.5, 5.6, 7.0, 9.0] } for k, v in dict_s.items(): plt.plot(range(1, len(v) + 1), v, '.-', label=k) # NOTE: changed `range(1, 4)` to mach actual values count plt.legend() # To draw legend plt.show() 和display: table

我不知道你的情况，你对这些按钮做了什么，但是你可以使用简单的display: table-cell和display: block吗？

float: left

.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;
}