Question

我遗漏了着色等等，但我之后的想法是1000px宽（带填充的980）标题块不高于125px，左边有15％宽的标识块（包含可调整大小以适合的可点击图像），第二个85％宽列中的标题栏和导航块。徽标块延伸超出导航块底部六个像素（由于导航块的6px底部边距。）整个标题块比主块高出10px。

示例可以在这里看到：http://www.bsu.edu/academy/test/

在Firefox中，它实现了它应该做的事情。我的img最大宽度为147px，高度为124px，并且标题块扩展到适合它，它比主块高出10px。因此徽标块定义了标题弹性框的高度。

在Chrome中，标题栏和导航块缩小以适合其内容，徽标块的大小正确，但重叠主块，比主块高16px。（6px导航边距，10px主要边距）。因此标题和导航正在定义标题弹性框的高度。

其中哪些行为正确，我如何让它们都像mozilla一样？

以下是我尝试使用的布局的粗略版本：

<header>
    <div id="logo"><a href=""><img src="" /></a></div>
    <div id="title><h1>Title</h1></div>
    <nav>Navigation</nav>
</header>
<main>Content</main>

CSS的相关部分我试图使用：

header {
    display:-webkit-flex; display:flex;
    -webkit-flex-flow:column wrap; flex-flow:column wrap;
    max-width:1000px;
    width:100%;
    max-height:125px;
    margin:0 auto;
    padding:0 10px;
    }

#logo {
    display:-webkit-flex; display:flex;
    max-width:148px;
    width:15%;
    margin:0;
    padding:0;
    }

    #logo a {
        display:-webkit-flex; display:flex;
        border:none;
        height:auto;
        }

    img {
        display:block;
        border:none;
        width:100%;
        margin:auto;
        }

    #logo a img {padding:0 8px 8px 8px;}

#title {
    -webkit-flex:1 0 auto; flex:1 0 auto;
    display:-webkit-flex; display:flex;
    width:85%;
    }

nav {
    width:85%;
    margin:0 0 6px 0;
    }

main {margin-top:10px;}

为什么webkit和mozilla大小的弹性盒不同？

0 个答案: