代码之家 › 专栏 › 技术社区 › jeroen

在FireFox和Chrome中链接不可点击

webkit firefox css html

jeroen · 技术社区 · 15 年前

我正在使用一个粘性的页脚,如中所述:

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

问题是这个链接在火狐3.5.2和Chrome中是不可点击的,它在后面。在IE7和IE8中确实有效,但我想这没什么意义。

我玩弄过z索引,但这行不通。顺便说一下,我需要这个位置:在页面中的相对位置来定位那个分区中的一些内容。

有没有一种方法可以使链接在所有浏览器中都可以单击页脚?

规范的相关部分:

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>

3 回复 | 直到 11 年前

jeroen 11 年前

解决了这个问题,添加了一个位置: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;
}

5566 13 年前

我在WebKit浏览器中也遇到过类似的问题。设置z索引或位置并不能解决问题,但在设置-webkit transform:translate(0,0)之后,该按钮可以再次单击。

Harry dbr 11 年前

如果我错了,请纠正我,但我认为您应该为z-index添加一个负值,它会将链接按钮向后推。

这对我有用

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前