css - 奇妙な疑似 CSS バグのトラブルシューティング

Question

私は仕事のためのユニークなプロジェクトに取り組んでいます。私が直面している問題は、このプロジェクトで使用されている CSS スタイルシートしか制御できず、そのレイアウトを実際に変更することを任されていることです。これは問題ありません。しかし、この「シール」リンク ボタンで奇妙な問題が発生しています。

もともと、彼らは背景としての画像と、#searchSeal 内にある からトリガーされるシールを選択するためのポップアップ ウィンドウを開くリンクを持っていました。

それは新しいブラウザーで動作しますが、IE8+ をサポートする必要があります。それらのブラウザーでは、リンクはボタンの外側の縁をクリックするだけで、マウスオーバーすると、ボタン用に作成した :after は実際には単なるプレースホルダーです。ボタンのテキスト...その後、リンクがドロップします。

できれば助けてください！問題の CSS は以下のとおりで、おそらく問題を見逃しているだけです。

ありがとう！！

#divSeal {
    z-index: 2;
    display: block;
    position: absolute;
    left: 290px;
    top: 50px;
    width: 176px;
    height: 41px;}

#searchSeal {
    z-index: 3;
    display: block;
    position: absolute;
    left: 0px;
    top: 30px; 
    width: 176px;
    height: 40px; 
    border: 1px solid #B18D44; 
    color: white;
    background: #F9D791;
    border-radius: 15px 15px 15px 15px;
    -webkit-border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;}

#searchSeal:hover {
    background: #B18D44;
    color: #004AFF;}

#searchSeal:after {
    content: "Choose Seal";
    z-index: 2;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 176px;
    height: 40px;
    font: bold 24px Arial;
    line-height: 40px;
    text-align: center;
    text-shadow: 2px 2px #B18D44;}

#searchSeal a, #_ctl0_ContenPlaceHolderContent_hSearchSeal {
    z-index: 500;
    display: block;
    position: relative;
    left: 0px;
    top: 0px;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none;}

助けてくれてありがとう!!