Question

我有以下html和css代码：

问题是IE10＆amp; Chrome（位于header_container部分右下角）。

但在Firefox中：显示在浏览器的右下角（或-Strange：））。

如何在Firefox中修复该行为？

代码在这里：

    <html>
    <head>
    <LINK href="LayoutWithDivsLikeTables3.css" rel="stylesheet" type="text/css">
    </head>
    <body>

    <div id="main_container">
        <div id="header_container">     
            <h1>Title Title Title</h1>      
            <div id="top_menu"> Top Menu | Top Menu | Top Menu | Top Menu | Top Menu |</div>
        </div>  

        <div id="row">
            <div id="left" >
                <h4>Left Col</h4>
                <p>...</p>
            </div>

            <div id="middle">
                <h4>Middle Col</h4>
                <p>...</p><p>...</p>
            </div>

            <div id="right">
                <h4>Right Col</h4>
                <p>...</p>
            </div>
        </div>
        <div id="footer">Footer</div>
    </div>

    </body>
    </html>

body    {
    margin: 0px; 
    width: 100%; 
    height:100%;
}

#top_menu   {
    position: absolute;
    bottom: 10px; right: 0px; 
    //width: 250px;
    font-size: 13px;
    padding:5px;
}

#header_container {
    width: 100%;
    height: 150px;
    border:  1px solid black;
    display: table-caption;
    text-align: center;
    position: relative;
}

#footer {
    width: 100%;
    height: 150px;
    border:  1px solid yellow;
    display: table-row;
}

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

#row{
    //height: 33%;
    display: table-row;
    }

#left { background-color: blue; width: 150px;}
#right { background-color: red; width: 150px;}
#middle {  background-color: yellow;}

#left, #right, #middle 
{
    display: table-cell;
    border: 1px black;
}

Answer 1

您无法合并display: table-caption和position: relative。

根据标准，这样做的行为是未定义的，因此没有错误的行为：

＆＃34;＆＃39;位置的影响：相对＆＃39;在表行组， table-header-group，table-footer-group，table-row，table-column-group， table-column，table-cell和table-caption元素未定义。＆＃34;

参考：http://www.w3.org/TR/CSS21/visuren.html#propdef-position

您必须为标题选择另一个display设置，或使用其他方式放置菜单。例如，您可以将标题的内容包装在div中，这可以采用position: relative设置。

Answer 2

您可以更改html代码中的某些内容，将表设置为以内容开头，让页眉和页脚只显示：block。

http://jsfiddle.net/v1ycfn8m/1/

#top_menu   {
    position: absolute;
    bottom: 10px; right: 0px; 
    font-size: 13px;
    padding:5px;
}

#header_container {
    width: 100%;
    height: 150px;
    border:  1px solid black;
    display: block;
    text-align: center;
    position: relative;
}

#footer {
    width: 100%;
    height: 150px;
    border:  1px solid yellow;
    display: block;
}

#main_container {
    display: block;
    width: 100%;
    height: 100%;
}

#row{
    display: table-row;
}

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

和

   <div id="table">
        <div id="row">
            <div id="left" >
                <h4>Left Col</h4>
                <p>...</p>
            </div>

            <div id="middle">
                <h4>Middle Col</h4>
                <p>...</p><p>...</p>
            </div>

            <div id="right">
                <h4>Right Col</h4>
                <p>...</p>
            </div>
        </div>
    </div>

Answer 3

删除#top_menu css属性position:absolute。现在菜单将显示在顶部。然后相应地设置你想放置的位置。

Answer 4

在Firefox中，＆＃34;显示：table-caption＆＃34;忽略＆＃34;职位：亲属＆＃34;属性。

这是解决此问题的另一种方法，不使用css表格布局。

Live Demo

在上面的演示中，我使用了div元素的默认行为（它只是块元素，并且利用其父元素的100％宽度）

修改后的CSS：

body    {
    margin: 0px; 
    width: 100%; 
    height:100%;
}

#top_menu   {
    text-align: right;
   font-size: 13px;
    padding:5px;
}

#header_container {
    border:  1px solid black;
    text-align: center;
}

#footer {
    width: 100%;
    clear: left;
    height: 150px;
    border:  1px solid yellow;
}


#left { background-color: blue; width: 33%;}
#right { background-color: red;width: 33%; }
#middle {  background-color: yellow; width: 34%;}

#left, #right, #middle 
{
    float: left;
    border: 1px black;
}

Firefox中格式错误的div

4 个答案: