Question

我正在尝试在页脚顶部添加一个子页脚，like so

标题+页脚（蓝色）
子页脚（红色）

我使用了Ryan的粘性页脚方法，因此我的HTML看起来像这样

<div id="root">
    <div id="header">
        <div class="wrapper">
            <h1 class='logo'>Logo</h1>
        </div>
    </div>
    <div id="content"></div>
    <div id="root-footer"></div>
</div>
<div id="footer">

    <div class="wrapper">
        <div id='subfooter'>
            <div class='subfooter-content'>
                <a id="main-nav01" href="javascript: void(0)" target="_self">トップ</a>
                <a id="main-nav02" href="javascript: void(0)" target="_self">「世界のKitchenから」の思い</a>
                <a id="main-nav03" href="javascript: void(0)" target="_self">タイのお母さんのKitchenから</a>
                <a id="main-nav04" href="javascript: void(0)" target="_self">ちいさなKitchenのムービー</a>
            </div>
        </div>

    </div>

</div>

和像我这样的subfooter的CSS

#subfooter
    position: relative


    .subfooter-content
        position: absolute
        margin-top: -200px
        height: 70px
        z-index: 10

但它不适用于FF，如果你看到screen-shots（FF在右边），子脚（红色）跟在页脚（蓝色）

修改

我使用指南针，在实际设计中它使用了轮廓顶部，我在FF中遇到问题。

这是jsbin http://jsbin.com/fifeleru/1

Answer 1

如果您在outline:1px solid blue上将border-top:1px solid blue;替换为.footer，问题就解决了。

See here

使用Ryan Fait的方法嵌入子页脚

1 个答案: