jquery - 垂直选项卡在 chrome、ie 和 firefox 之间显示不同的结果

Question

我尝试使用 css display:table,table-cell 属性通过 jquery UI 设置垂直选项卡。 但是正如您在演示中看到的那样。右侧单元格在 google chrome 和 IE 中显示不合理的上边距。在 firefox 中它工作正常。

http://jsfiddle.net/F6tbh/

.ui-tabs-vertical { display:table; padding:0px;  }
.ui-tabs-vertical .ui-tabs-nav { display: table-cell; }
.ui-tabs-vertical .ui-tabs-panel { display: table-cell;margin:0px;}

有人可以给我提示吗？谢谢。

Answer 1

除非你告诉它们，否则细胞可以做它们想做的事，试试这样:

.ui-tabs-vertical { display:table; padding:0;; }
.ui-tabs-vertical .ui-tabs-nav { display: table-cell;vertical-align:top; }
.ui-tabs-vertical .ui-tabs-panel { display: table-cell;float:left; }

设计 H2 以获得完美效果。

还有 fiddle :http://jsfiddle.net/F6tbh/1/