Question

我正在使用CSS3按钮来处理我正在处理的网站。然而，似乎控制这些按钮的CSS打破了它的风格链接。如果有人能指出我出错的地方，我将不胜感激。

CSS控制按钮：

.button {
    display: inline-block;
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding:5px 15px;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    text-decoration: none;
}
.button:active {
    position: relative;
    top: 1px;
}
.blue {
    color: #d9eef7;
    background: #0095cd;
    background: -webkit-gradient(linear, left top, left bottom, from(#009DD1), to(#009DD1));
    background: -moz-linear-gradient(top,  #009DD1,  #009DD1);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
    background: #007ead;
    background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
    background: -moz-linear-gradient(top,  #0095cc,  #00678e);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
    color: #FFFFFF;
    background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
    background: -moz-linear-gradient(top,  #0078a5,  #00adee);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}

违规链接：

<div class="nav">
    <a href='http://www.twantrum.com/mild.html' target="_top" class='button blue'>Mild</a>
    <a href='http://www.twantrum.com/restrained.html' target="_top" class='button blue'>Restrained</a>
    <a href='http://www.twantrum.com/angry.html' target="_top" class='button blue'>Angry</a>
    <a href='http://www.twantrum.com/mel-gibson.html' target="_top" class='button blue'>Mel Gibson</a>
</div>

Answer 1

您发布的标记没有错误。

虽然看着你的页面本身，我注意到这一部分产生错误：

<script type="text/javascript">
$(document).ready(function(){
   $('.button').click(function(){ return false; });
});
</script>

为什么这不起作用在这里得到解答：What's the effect of adding 'return false' to a click event listener?

希望它有所帮助。

CSS按钮类打破链接

1 个答案: