3

私はこれを理解することはできません。以下のリンクは、IE8 を除くすべてのブラウザーで問題なく機能します。IE8 で要素をクリックすると、ボタンが消えます。あった場所をもう一度クリックすると、再び表示されます。しかし、いくらクリックしても実際に href の場所にたどり着くことはありません。それがなぜなのか、誰か説明してもらえますか？私はすべての考えを使い果たしましたが、まだうまくいきません。あなたのすべての考えに感謝します！

html...

<div style="padding:0px 0px 30px 0px; clear: both;">
 <div style="width: 50%; display: block; float: left;">
  <a href="../index/features" class="big_button">Learn More</a>
 </div>
 <div style="width: 50%; display: block; float: left;">
  <a href="../index/signup" class="big_button">Get Started</a>
 </div>
</div>

...そしてスタイルシート...

 .big_button {
-moz-box-shadow: inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow: inset 0px 1px 0px 0px #bbdaf7;
box-shadow: inset 0px 1px 0px 0px #bbdaf7;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff
    ), color-stop(1, #378de5) );
background: -moz-linear-gradient(center top, #79bbff 5%, #378de5 100%);
filter: progid : DXImageTransform.Microsoft.gradient (           
       startColorstr = '#79bbff', endColorstr = '#378de5' );
background-color: #79bbff;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #84bbf3;
display: inline-block;
color: #ffffff;
font-family: Arial;
font-size: 18px;
font-weight: bold;
padding: 15px 45px;
text-decoration: none;
margin-left: 130px;
}

.big_button:hover {
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
 background: -moz-linear-gradient(center top, #378de5 5%, #79bbff 100%);
 filter: progid : DXImageTransform.Microsoft.gradient (startColorstr = '#378de5', endColorstr = '#79bbff' );
 background-color: #378de5;
}

.big_button:active {
 position: relative;
 top: 1px;
}
4

2 に答える 2

0

私はちょうどそれを理解しました。IE8 は css の :active に問題があるようです。そのため、スタイルシートの次のセクションで問題が発生していました。

.big_button:active {
  position: relative;
  top: 1px;
}

現在の修正では、ボタンの css の ':active' 部分は必須ではないため除外しています。IE8 で :active に問題がある理由について詳しい情報があれば、ぜひ知りたいです。

于 2012-07-28T13:55:38.693 に答える