html - Mozilla 无法识别显示 :inline-block inside display:table-cell container-6ren

html - Mozilla 无法识别显示 :inline-block inside display:table-cell container

转载作者：太空宇宙更新时间：2023-11-03 21:51:20

26

4

我正在尝试通过以下代码使用 CSS 构建流畅的布局。 (对不起，如果我包含太多)。

这里是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>