我是一名开发人员，但现在我需要修复一个 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;
}
关于javascript - 为什么 css 页脚链接不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23660315/