单击时CSS href文本链接跳转到新行

Question

我的导航栏工作得很好，任何图像链接都工作得很好，但是当我点击它们时，我页面上的所有文本链接都会跳下来。它们中的大多数跳得如此之远，您实际上无法单击它。

我还注意到我的 a:visited 链接从某处继承了颜色 #000，而它们应该是 #616161。在我的 Android 设备上浏览时没有问题，但在 IE11 和 Chrome32 上会出现问题。

HTML 没什么特别的。只是

<a href="/page-name.html">Page Name</a>

键入链接。它必须与 CSS 相关。

CSS:

body {
    background-color:    #7296d9;
    max-width:1000px;
}
#wrapper {
    width:auto;
    background:url(../images/bg.jpg);
    background-repeat:repeat;
    margin:4px;
}
#content {
    width:98%;
    text-align:center;
    margin:auto;
}
#paragraph {
    width:80%;
    font-size:18px;
    color:    #666;
    font-weight:100;
    text-align:justify;
    margin:10px auto 25px auto;
}
.reviews {
    width:80%;
    margin:auto;
    text-align:justify;
    color:    #666;
}
p {
    margin:10px 0 10px 0;
}
h1 {
    line-height:48px;
    font-size:36px;
    font-weight:bold;
    text-align:center;
    margin-top:10px;
}
h2 {
    line-height:42px;
    font-size:24px;
    font-weight:bold;
    text-align:center;
}
a:link, a:visited {
    color:     #616161;
    text-decoration: underline;
}
a:hover, a:active {
    color:     #ffffff;
    text-decoration: underline;
}
#header {
    height:86px;
    max-height:86px;
    width:98%;
    min-width:500px;
    position:relative;
    background-image:url(../images/logo.png);
    background-repeat:no-repeat;
}
#header .left {
    float:left;
    height:auto;
}
#header .media-header {
    float:right;
    margin-top:50px;
    margin-right:-20px;
}
#menu ul li:hover > ul {
    display: block;
}
#menu {
    display:table;
    width:100%;        
    background: -webkit-linear-gradient(    #d5d5d5,     #595959); /* For Safari */
    background: -o-linear-gradient(    #d5d5d5,     #595959); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(    #d5d5d5,     #595959); /* For Firefox 3.6 to 15 */
    background: linear-gradient(    #d5d5d5,     #595959); /* Standard syntax */
    -webkit-border-radius: 25px;
    -o-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}
#menu ul ul {
    display: none;
}
#menu ul {
    height:auto;
    font-size: 16px;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px 2px     #cccccc;
    text-decoration:none;
    list-style: none;
    position: relative;
    display: table-row;
}
#menu a:link, a:visited {
    display:block;
    text-decoration: none;
    color:     #000000;
    padding: 8px auto 8px auto;
}
#menu a:hover, a:active {
    display:block;
    padding:5px;
    text-decoration:none;
    color:     #fff;
}
#menu ul:after {
    content: "";
    clear:both;
    display: block;
}
#menu ul li {
    display:table-cell;
    width:auto;
}
#menu ul a:link, a:visited {
    display: block;
    padding: 5px;
    color:    #000;
    text-decoration: none;
}
#menu ul a:hover, a:active {
    display:block;
    padding:5px;
    text-decoration:none;
    color:     #fff;
}
#menu ul ul {
    background:     #999;
    border-radius: 0px;
    padding: 0;
    position: absolute;
}
#menu ul ul li {
    width:auto;
    border-top: 1px solid     #ccc;
    position: relative;
    display:block;
}
#menu ul ul li a {
    padding: 5px;
    text-align:left;
    color:    #000;
}        
#menu ul ul li a:hover {
    color:    #FFF;
}
#menu ul ul:last-child, nav ul ul:last-child a {
    -webkit-border-bottom-right-radius: 10px;
    -o-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -o-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
}
.center {
    text-align:center;
}
#reviews {
    width:80%;
    text-align:justify;
    overflow:hidden;
    margin:25px auto 25px auto;
}
#reviews img {
    position:relative;
    float:left;
}
#form {
    color:    #666;
    margin:0px auto 0px auto;
    width:350px;
}
#form p {
    color:    #666;
    margin:0px auto 0px auto;
    width:350px;
}
.bottombar {
    margin:auto;
    width:100%;
}
#footer {
    display:block;
    font-size:12px;
    color:    #616161;
    text-align:center;
    width:auto;
    margin:5px auto 5px auto;
}
#footer img {
    text-align:center;
    color:    #616161;
    width:100%;
    margin:5px auto 5px auto;
}
#media-footer {
    text-align:center;
    margin:10px 0 15px 55px;
}
#media-footer img {
    text-align:center;
    margin:10px 0 15px 55px;
}
nav ul {
    display:none;
}
#minimenu {
    display:none;
}

Answer 1

这是因为您在元素 :active 时向元素添加填充:

#menu ul a:hover, a:active {
    display: block;
    padding: 5px;
    text-decoration: none;
    color: #fff;
}

值得注意的是，您在不同的实例中重复相同的样式。

#menu a:hover, a:active {
    display: block;
    padding: 5px;
    text-decoration: none;
    color: #fff;
}

只需从两个声明中删除填充，它就会按预期工作。