gpt4 book ai didi

javascript - 为什么 css 页脚链接不起作用?

转载 作者:太空宇宙 更新时间:2023-11-03 20:43:38 25 4
gpt4 key购买 nike

我是一名开发人员,但现在我需要修复一个 css 错误。我有一个 Angular 应用程序。页脚中有一些通用链接。但它们不再可点击。

这是我的html代码

<!doctype html>
<html lang="en" ng-app="example">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Globalization Resource Center</title>
<link rel="stylesheet" type="text/css" href="./style.css"/>
<body>
<div id="content">
<div class="container-fluid">
<div class="row-fluid" ng-view></div>
</div>
</div>
<div id="footer">
Copyright Text goes here.
<a onclick="window.open(this.href);return false;" href="http://www.google.com" title="Privacy Policy"> Example Link</a> |
<a href="mailto:info@example.com" title="Contact Us">Contact Us</a>
</div>
</body>
</html>

这是 style.css

#content {
position: relative;
width: 100%;
height: auto !important;
min-height: 100%;
padding-bottom: 54px;
margin: 0 auto -54px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}

.container-fluid {
padding-right: 20px;
padding-left: 20px;
*zoom: 1;
}

.row-fluid {
width: 100%;
*zoom: 1;
}

#footer {
height: 54px;
margin: 0 auto;
}

我剥离了代码并将其放在 plunker 中: http://plnkr.co/edit/Upvm5A7ksGT3mzXIcXTp

最佳答案

您的 margin: 0 auto -54px; 规则导致了这种情况。页脚链接最终位于内容下方。修复边距或在页脚添加 z-index:

#footer {
height: 54px;
margin: 0 auto;
z-index:1;
position:relative;
}

jsFiddle example

关于javascript - 为什么 css 页脚链接不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23660315/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com