css - CSS按钮：活动不工作

Question

也许这只是一个我忽略的愚蠢问题。

小提琴

表格上方的按钮和删除按钮都服从子句box-shadow中的，:active但第 5 个单元格不服从。

我正在使用 Chrome 23。

Answer 1

您希望您的按钮位于第 5 个 td 中吗？如果是，则删除此

演示

#table button{    
    position: absolute;
    top: 0px;
    right: 5px;
    height: 10px;
    width: 1.5em
}

或者，如果您希望您的按钮就在那里（表外），请替换#table button为以下样式

演示 2

#table button{    
    position: absolute;
    top: 0px;
    right: 5px;
}

并添加这个

#table button:active{    
    position: absolute;
    top: 0px;
    right: 5px;
    top: 1px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
    background-image: none
}

注意：您正在使用position: absolute;，请确保已将其包裹在 position: relative; 容器