2014-04-17 4 views
0

누군가 Firefox에서 작동하지 않는 이유를 알아낼 수 있습니까?CSS 디스플레이 : Firefox에서 표가 작동하지 않습니다.

http://jsfiddle.net/cZQUb/6/

*{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;} 
+2

display : table을 사용하는 이유는 무엇입니까? – sheriffderek

+0

@sheriffderek 이것은 내가 작동하도록이 유형의 레이아웃을 얻는 것을 고려할 수있는 유일한 방법이었습니다. – mike

+0

그리드 영역의 크기가 조금씩 변하는 것을 제외하고는 어떻게 반응하는지 보지 못했습니다. – sheriffderek

답변

1

가 제대로 작동하려면, 당신이 그렇게 테이블의 직접적인 아이 모두를 재 작업해야는 테이블 행, 그리고 테이블 행 '직접적인 아이의 모든 테이블 -이다 세포.

관련 문제