0

我正在尝试使用 CSS 创建一个垂直的按钮分组。以前,我尝试使用无序列表来执行此操作

我已经删除了无序列表,只是将按钮作为元素保留。在 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;
}

提前感谢您提供的任何帮助。

4

1 回答 1

0

确保ie8不在兼容模式下,尝试点击网址栏中的破碎页面图标

于 2012-10-20T02:05:19.653 回答