javascript - IE 7 DIV クラス名の変更の問題

Question

特定のクラス名を変更しようとすると、IE7 で問題が発生しDIVます。

基本的に 2 つのクラスがあり、1 つはグレー表示されたボタンで、もう 1 つは通常のボタンです。両方のクラスは、いくつかの条件に関してトグルします。IE7 では、最初にクラス名を変更しようとすると正しく変更されますが、元に戻そうとすると消えて、ページをもう一度クリックすると元に戻ります。

これは、レンダリングの問題のようです。最初のクラスがグレーアウト状態に正しく変更される理由がわかりませんが、ボタンが通常に戻るようにトグル条件が変更されたときに正しく機能せず、むしろ非表示になりますか?

IE 8+ および firefox、chrome では正しくレンダリングされています。何かご意見は？

PS 注: マスク クラスにはスタイル属性がなく、名前識別子だけがあります。

CSS コード:

.darkClass
{
    background-color: rgb(241, 241, 241);
    filter:alpha(opacity=50); /* IE */
    opacity: 0.5; /* Safari, Opera */
    -moz-opacity:0.50; /* FireFox */
    z-index: 200;
    height: 100%;
    width: 100%;
    background-repeat:no-repeat;
    background-position:center;

    display: block;
}

JS コード:

if(flagButton==true) //toggle condition
{                          
    // this block shows the normal button    
    document.ChangePwdExpiredForm.submitHidden1.disabled=false;
    document.getElementById('changPwdsubmit').className='mask';
}
else
{                          
   // this block shows the greyedout 
   buttondocument.ChangePwdExpiredForm.submitHidden1.disabled=true;
   document.getElementById("changPwdsubmit").className="darkClass";
}

HTML コード:

<div class="button_login" id="button_login">
  <div class="mask" id="changPwdsubmit">
    <div class="imageButton2">
      <a href="javascript:submitMask1();" onclick="submitMask1();return false" class="loginButton2_right">
        <span >
          <bean:message key="button.transaction.continue"/>
        </span>
      </a>
    </div>
  </div>
</div>