在 Firefox 和 Chrome 中无法点击粘滞页脚中的链接答案

【问题标题】：Link in sticky footer not clickable in Firefox and Chrome在 Firefox 和 Chrome 中无法点击粘滞页脚中的链接
【发布时间】：2010-11-26 13:33:59
【问题描述】：

我正在使用如下所述的粘性页脚：

我有一个带有链接的段落，我想放在页面底部，所以我把它放在 .footer 中。

问题是该链接在 Firefox 3.5.2 和 Chrome 中不可点击，它位于 .push 后面。它在 IE7 和 IE8 中确实有效，但我想这并不能说明什么。

我玩弄过 z-index，但这不起作用。顺便说一句，我需要 #page 中的 position:relative 来在该 div 中放置一些东西。

有没有办法让 .footer 中的链接在所有浏览器中都可点击？

代码的相关部分：

css

html, body {
    height: 100%;
}
#page {
    width: 962px;
    text-align: left;
    min-height: 100%;
    /* sticky footer part */
    height: auto !important;
    height: 100%;
    margin: 0 auto -90px;
    /* end sticky footer */
    position: relative;
}
/* sticky footer part */
.push, .footer {
    height: 90px;
}
.push {
}
.footer {
    background: #181f18 url(../images/background-top.png) no-repeat center bottom;
}

html

<div id="page">
  <div id="wrapper">
    <div id="contents">bla bla</div>
  </div>
  <div id="footer">bla bla</div>
  <div class="push"></div>
</div>
<div class="footer">
    <p><a href="http://www.some-site.com/">Some Text</a></p>
</div>

【问题讨论】：

标签： html css firefox webkit

【解决方案1】：

解决了，添加了一个 postion:relative 和 z-indexes 做到了：

.push, .footer {
    height: 90px;
    position: relative;
}
.push {
    z-index: 9000;
    position: relative;
}
.footer {
    background: #181f18 url(../images/background-top.png) no-repeat center bottom;
    z-index: 9999;
    position: relative;
}

【讨论】：

为了跨浏览器兼容，push 和 footer 类也需要是相对位置才能识别 z-index。
请用 Austin 的评论更新您的答案。它真的为我节省了很多时间。

【解决方案2】：

我在 webkit 浏览器中遇到了类似的问题。设置 z-index 或位置并没有解决问题，但是在我设置 -webkit-transform:translate(0,0); 之后该按钮再次可点击。

【讨论】：

【解决方案3】：

如果我错了，请纠正我，但我认为您应该为 z-index 添加一个负值，将其推回启用链接按钮。

这对我有用

.footer, .push {
    height: 4em;
    position: relative;
    width: 90%;
    margin: 0 auto;
    z-index: -9000;
}

【讨论】：