Question

在IE和Chrome中工作，但在firefox中对齐。有人能帮帮我吗？问题在于“.menu_central .navegacao li”。没有“边界：1px solid＃000;宽度：215px;”工作但没有工作。

我需要在firefox中调整中心。

<html>
    <head>
        <meta http-equiv="Content-Language" content="pt-br" />
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
        <style>
            html { color: #000; background: #FFF; }
            body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, 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; }
            li { 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; font-variant : normal; }
            sup { vertical-align: text-top; }
            sub { vertical-align: text-bottom; }
            input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; }
            legend { color : #000; }

            html, body {
                margin-top: 0px;
                margin-left: 0px;
            }
            .menu_central {
                width: 100%;
                position: fixed;
                top: 0px;
                left: 0px;
                border-bottom: 1px solid #000;
            }
            .menu_central .navegacao { 
                line-height: 30px;              
                text-align : center;                

                /* Firefox */   
                display: -webkit-box;
                -moz-box-pack: center;
                -moz-box-align: center;

                /* Safari and Chrome */
                display: -webkit-box;
                -webkit-box-pack: center;
                -webkit-box-align: center;

                /* W3C */
                display: box;
                box-pack: center;
                box-align: center;

            }
            .menu_central .navegacao li { 
                border: 1px solid #000;
                width: 215px;
            }
        </style>
    </head>
    <body>
        <div class="menu_central">
            <ul class="navegacao">
                <li><span class="inicial_nome">Q</span>uem Somos</li>
            </ul
        </div>
    </body>
</html>

Answer 1

正如我在评论中所说的

替换：

border: 1px solid #000;

使用：

outline: 1px solid #000;

这是因为，轮廓不占用空间。所以它应该适用于每个浏览器。您可能需要向其余div添加1px或2px，因为边框已消失。

Answer 2

您必须添加display：inline-block。

因此，您的代码应如下所示：

.menu_central .navegacao li { 
    border: 1px solid #000;
    width: 215px;
    display: inline-block;
}

li div Align Center - Bug Firefox

2 个答案: