CSS3 Tooltip IE7解决方法

Question

我有这个CSS3工具提示在Chrome，FF，IE9 / 8中工作正常，但在IE7中不起作用，我想知道是否有人可以帮助它在IE7中也能正常工作。

    /* ==================== TOOLTIP  ==================== */
/* --- base --- */
div.p_table a.tooltip
    {
    position: relative;
    text-decoration: none !important;
    }
div.p_table div.tooltip{
    background: url(../images/question.png) no-repeat top left;
    width:16px;
    height:16px;
    display: inline-block;
    padding: 0px !important;
    margin: 0px !important;
}

div.p_table a.tooltip:hover
    {
    color: #999999;
    text-decoration: none !important;
    }

div.p_table a.tooltip:hover:after, div.p_table a.tooltip:hover:before
    {
    display: block;
    }

/* --- tooltip container --- */
div.p_table a.tooltip:before
    {
    content: attr(rel);
    display: block;
    width: 140px;
    position: absolute;
    z-index: 1000;
    bottom: 150%;
    left: -10px;
    padding: 5px 10px 8px 10px;
    text-align: left;
    color: #ffffff;
    display: none;
    /* background */
    background: #404040; /* CSS2 */
    background: -moz-linear-gradient(top, #4e4e4e 0%, #404040 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4e4e4e), color-stop(100%,#404040)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #4e4e4e 0%,#404040 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #4e4e4e 0%,#404040 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #4e4e4e 0%,#404040 100%); /* IE10+ */
    background: linear-gradient(top, #4e4e4e 0%,#404040 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e4e4e', endColorstr='#404040',GradientType=0 ); /* IE6-9 */
    /* border-radius */
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    /* box-shadow */
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    /* text-shadow */
    text-shadow: 0px 1px 0px #292929;
    }

/* --- tooltip arrow --- */
div.p_table a.tooltip:after
    {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    z-index: 1000;
    bottom: 18px;
    left: -2px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #404040;
    display: none;
    background: transparent;    
    }

我已经在jsfiddle中发布了整个CSS3 / html5，看看是否有人可以帮助我 http://jsfiddle.net/f7jMR/