即鏈接按鈕 - 只能單擊文本，而不是按鈕周圍的空間

我正嘗試使用CSS創建按鈕的垂直分組。以前，I tried doing this using an unordered list。即鏈接按鈕 - 只能單擊文本，而不是按鈕周圍的空間

我已經刪除了無序列表，只是將按鈕作爲元素。在Chrome和FF中一切正常，但不是IE8。「懸停」狀態激活的唯一時間是當您將鼠標懸停在鏈接文本上時，而不是整個按鈕。我希望整個盒子都是可點擊的。

這裏是我的HTML的相關代碼：

<div id="itemarea"> 
     <a href="#" class="item_button" id="139" style="color: #4bb2c5" data-seq= "0">Skydiving</a> 
<a href="#" class="item_button" id="140" style="color: #EAA228" data-seq= "1">Knitting</a> 
<a href="#" class="item_button" id="141" style="color: #c5b47f" data-seq= "2">Checkers</a> 
<a href="#" class="item_button" id="142" style="color: #579575" data-seq= "3">Surfing</a> 
    <button class="save_button" name="button" type="submit">Save</button> 

</div>

這裏是CSS：

#itemarea{ 
    padding-bottom:20px; 
    margin-top:54px; 
    height:470px; 
    float:left; 
    width:200px; 
    padding-left:15px; 
    background-color:#CFCFCF; 
    border:2px solid gray; 
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); 
    -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); 
    -o-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); 
    -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); 
    -ms-filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#999999'); 
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#999999'); 
} 


.item_button { 
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; 
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; 
    box-shadow:inset 0px 1px 0px 0px #ffffff; 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf)); 
    background:-moz-linear-gradient(center top, #ededed 5%, #dfdfdf 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf'); 
    background-color:#ededed; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-radius:6px; 
    border:1px solid #dcdcdc; 
    display:inline-block; 
    color:#777777; 
    font-family:arial; 
    font-size:15px; 
    font-weight:bold; 
    padding:6px 24px; 
    text-decoration:none; 
    text-shadow:1px 1px 0px #ffffff; 
     width:120px; 
}.item_button:hover { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed)); 
    background:-moz-linear-gradient(center top, #dfdfdf 5%, #ededed 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed'); 
    background-color:#dfdfdf; 
}.item_button:active { 
    position:relative; 
    top:1px; 
}

預先感謝您可以提供任何幫助。

來源

2012-10-20 MikeC

確保ie8未處於兼容模式，請嘗試單擊url欄中的損壞頁面圖標

來源

2012-10-20 02:05:19 Darwayne

不可以。定期視圖。 – MikeC

即鏈接按鈕 - 只能單擊文本，而不是按鈕周圍的空間

回答

相關問題