CSS显示：表在Firefox中不工作

有人能帮我弄清楚为什么这在Firefox中不起作用吗

---

要使其正常工作，您需要对其进行返工，以便表的所有直接子项都是表行，所有的表行的直接子集都是表格单元格。

使用显示的理由是什么：表？@ SeiffffDeKe:这是我唯一可以考虑让这种布局工作和响应的方式。我不知道它是如何响应的，除了网格区域的大小可能有所变化。使用表格。。。。仅浮动和宽度：calc（）；

*{margin:0px;padding:0px;}
html, body{height:100%;width:100%;}

.mainNav{display:block;height:100px;width:100%;}

.mainContainer{display:table;background:#666;height:calc(100% - 100px);width:100%;}
.sideNav{display:table-cell;background:#888;height:100%;min-width:300px;}
.rightContResp{display:table-cell;background:#333;height:calc(100% - 50px);width:100%;}

.filters{display:table-row;width:100%;height:50px;}

.rightCont{display:table;width:100%;height:100%;}
.messegersContResp{display:table-cell;background:#999;height:100%;min-width:300px;}
.messegersCont{display:block;height:100%;width:100%;overflow:auto;}
.messegersCont div{display:block;height:150px;width:100%;border-bottom:1px solid grey;}

.messageContResp{display:table-cell;background:#333;height:100%;width:100%;}
.messageCont{display:table;width:100%;height:100%;position:relative;}

.messageHead{display:block;min-height:100px;width:100%;background:purple;position:absolute;top:0px;}
.messageContent{display:block;height:calc(100% - 100px);width:100%;background:blue;position:absolute;top:100px;overflow:auto;box-sizing:border-  box;padding-top:5px;}
.messageContent div{height:200px;width:175px;margin-right:10px;background:black;display:inline-block;}