个人中心
gpt4 book ai didi

html - Firefox 中格式错误的 div

转载 作者：太空宇宙 更新时间：2023-11-03 23:27:52 26 4
gpt4 key购买 nike

我有以下 html 和 css 代码:

问题是它在 IE10 和 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;
}

最佳答案

您不能组合使用 display: table-caption 和 position: relative。

按照标准，这样做时的行为是未定义的，所以不存在错误行为:

"The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined."

引用:http://www.w3.org/TR/CSS21/visuren.html#propdef-position

您要么必须为页眉选择另一个 display 设置，要么使用不同的方式放置菜单。例如，您可以将 header 的内容包装在一个 div 中，它可以采用 position: relative 设置。

关于html - Firefox 中格式错误的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26254198/

26 4 0
文章推荐： c - 在没有路由器设置的情况下向世界开放网络应用程序
文章推荐： c# - 如何逐像素移动图像？
文章推荐： node.js - socket.io - 当用户连接或断开连接时打印消息
文章推荐： c - 如何计算C中任何给定值的百分比？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com