Mozilla无法识别display：inline-block内部显示：table-cell container

我正在尝试使用以下代码构建使用CSS的流体布局。（对不起，如果我包括很多）。Mozilla无法识别display：inline-block内部显示：table-cell container

这里是reset.css代码

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0; 
    padding:0; 
} 
table { 
    border-collapse:collapse; 
    border-spacing:0; 
} 
fieldset,img { 
    border:0; 
} 
address,caption,cite,code,dfn,em,strong,th,var { 
    font-style:normal; 
    font-weight:normal; 
} 
ol,ul { 
    list-style:none; 
} 
caption,th { 
    text-align:left; 
} 
h1,h2,h3,h4,h5,h6 { 
    font-size:100%; 
    font-weight:normal; 
} 
q:before,q:after { 
    content:''; 
} 
abbr,acronym { border:0; 
}

这里是mycss.css

.border 
{ 
/* 
    border-color:#000000; 
    border-style: solid; 
    border-width: 1px; 
*/ 
    background-color: #000000; 
} 

.border-aqua 
{ 
/* 
    border-color: #13eded; 
    border-style: solid; 
    border-width: 1px; 
*/ 
    background-color: #12eded; 
} 

.border-red 
{ 
/* 
    border-color: #ff0404; 
    border-style: solid; 
    border-width: 1px; 
*/ 
    background-color: #ff0404; 
} 

.border-green 
{ 
/* 
    border-color: #008100; 
    border-style: solid; 
    border-width: 1px; 
*/ 
    background-color: #008100; 
} 

.border-blue 
{ 
/* 
    border-color: #0000fd; 
    border-style: solid; 
    border-width: 1px; 
*/ 
    background-color: #0000fd; 
} 

.border-blue:hover 
{ 
    background-color: #ff0404; 
} 

#title 
{ 
    margin: 10px; 
    height: 40px; 
    width:auto; 

    display: block; 

} 

#ide 
{ 
    margin-bottom: 10px; 
    margin-left: 10px; 
    margin-right: 10px; 
    height: 80%; 

    width: auto; 


    display: block; 
} 

#container 
{ 
    width:100%; 
    height: 100%; 
    display:table; 
} 

#tasks 
{ 
    height: 100%; 
    width:250px; 
    display:table-cell; 
} 


#selectedView 
{ 
    height: 100%; 
    width: 200px; 
    display: table-cell; 
} 

.selectedTasks 
{ 
    height:30px; 
    width: 150px; 
    display: block; 


    display:-moz-inline-stack; 
    display:block; 


    background-color: #878787; 

} 

#selectedViewExpander 
{ 
    height: 100%; 
    width: 15px; 
    display: table-cell; 
} 


#area 
{ 
    width: auto; 
    height: 100%; 
    display: table-cell; 
}

代码，这里是HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Testing</title> 
     <link href="./css/reset.css" rel="stylesheet" type="text/css" media="all"> 
     <link href="./css/mycss.css" rel="stylesheet" type="text/css" media="all"> 
    </head> 
    <body> 
     <div id="title" class="border"></div> 
     <div id="ide"> 
      <div id="container" class="border"> 
       <div id="tasks" class="border-red"></div> 
       <div id="selectedView" class="border-green"> 
        <p class="selectedTasks">Copy</p> 
        <p class="selectedTasks">Past</p> 
        <p class="selectedTasks">Cut</p> 
       </div> 
       <div id="selectedViewExpander" class="border-blue"></div> 
       <div id="area" class="border-aqua"> 

       </div> 
      </div>   
     </div> 
    </body> 
</html>

我有问题，显示此页面在Mozilla中。但是，在Chrome和Safari中，一切正常。我是新来的CSS和HTML。如果有人给我建议，这将是非常感激。或者提出一些想法，我将来如何才能找出这类问题。先谢谢你。

链接Fiddle

来源

2013-06-19 Khamidulla

你能建立一个测试用例吗？ jsfiddle.net是一个很好的地方。 –

我现在就试试。 – Khamidulla

我在小提琴中创建了tast案例。 http://jsfiddle.net/TEy2p/。您可以在两个不同的浏览器（如chrome和mozilla）中打开它。你会看到不同。你可以看到div边框外的“Copy”，“Past”，“Cut”元素。 – Khamidulla

棒vertical-align:top;到#selectedView这样的：http://jsfiddle.net/TEy2p/1/

目前，Firefox是将沿表格单元格的底部文本。

来源

2013-06-19 11:30:14 gaynorvader

谢谢。你是我的英雄。但是，你能解释一下为什么它可以在webkit引擎上运行，但不能在壁虎中运行？或者，如果可能的话给我一些链接来阅读这个。再次感谢你。 – Khamidulla

我不知道这是肯定的，但也许其他浏览器的用户代理具有不同的“vertical-align”值设置（例如已经到顶部）。 – kleinfreund

在这两种情况下，id =“selectedView”的div元素设置为\t“vertical-align：baseline”。 – Khamidulla

请出像float属性的某些更新在mycss.css

#tasks 
    { 
     height: 100%; 
     width:250px; 
     display:table-cell; 
     float:left; 
    } 
    #selectedView 
    { 
     height: 100%; 
     width: 200px; 
     display: table-cell; 
     float:left; 
    } 
    #selectedViewExpander 
    { 
     height: 100%; 
     width: 15px; 
     display: table-cell; 
     float:left; 
    }

更新： 我检查第一答案和它完美的作品Chrome，但不是在mozila。尝试应用上面的代码并让我知道。

来源

2013-06-19 11:38:09 sarfaraj

不，它不适合我。如果我添加浮动：离开其他divs我正在建造的形式看起来不正确。 – Khamidulla

我尝试了第一个答案，它在Mac中有效。但你的答案不起作用。即使它打破了形式。 – Khamidulla

好的...但是vertical-align：top;在mozila上工作不是铬。 – sarfaraj

Mozilla无法识别display：inline-block内部显示：table-cell container

回答

相关问题