CSS按鈕類別中斷鏈接

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?

希望它能幫助。