0

3 つのタブを持つ「タブ ツールバー」があります。ユーザーがタブをクリックすると、クリックされた 3 つのタブに応じて、Web ページに異なるデータが表示されます。

ユーザーが 3 つのタブのうちどれを「選択」したかを思い出させるために、クリックされたときにその CSS クラスをオンザフライで変更します。

「選択済み」タブは次のように変更されます。(1) グラデーション付きの黄色がかった背景。(2) 大きなフォント。(3) 選択したタブの幅と高さがそれぞれ約 6 ピクセルずつ増加します。

Firefox では問題なく動作します。しかし、IE 10.0.9200 では、選択したタブの CSS クラスへの変更は、背景色とグラデーションに関して失敗します。たとえば、タブ #3 が最初に選択された場合、問題はありません。黄色のグラデーションが表示されます (フォントが大きくなり、幅と高さが大きくなります)。

しかし、別のタブをクリックしてもう一度タブ＃3をクリックすると、IEは「選択された」CSSクラスの一部を「忘れる」ようです。2回目（および3回目と4回目など）にクリックしてタブ＃3を選択すると、フォントサイズが大きくなり、幅と高さが大きくなりますが、グラデーションのある色付きの背景が表示されません.

IE のページで「リロード」を行うと、BAM がグラデーション付きの色付きの背景に突然戻ります。

「選択された」CSS クラスは次のとおりです。

 .selectedTabClass{
-moz-box-shadow:inset 0px 1px 0px 0px #fff6af;
-webkit-box-shadow:inset 0px 1px 0px 0px #fff6af;
box-shadow:inset 0px 1px 0px 0px #fff6af;
background:-webkit-gradient( linear, left top, left bottom,  
                  color-stop(0.05, #ffec64), color-stop(1, #ffab23) );
background:-moz-linear-gradient( center top, #ffec64 5%, #ffab23 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', 
               endColorstr='#ffab23');
background-color:#ffec64;
-webkit-border-top-left-radius:15px;
-moz-border-radius-topleft:15px;
border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-moz-border-radius-topright:15px;
border-top-right-radius:15px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #ffaa22;
display:inline-block;
color:#333333;
font-family:Arial;
font-size:18px;
font-weight:bold;
font-style:normal;
height:65px;
width:186px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffee66;
 }
 .selectedTabClass:hover {
background:-webkit-gradient( linear, left top, left bottom, 
              color-stop(0.05, #ffab23), color-stop(1, #ffec64) );
background:-moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', 
              endColorstr='#ffec64');
background-color:#ffab23;

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

HTMLは次のとおりです。

  <label class="selectedTabClass" id="tab3"
         onclick="handleTabSelect(3, this)">this is Tab #3</label>

Javascript は次のとおりです。

  function handleTabSelect(whichTab, thisOne)
  {
      document.getElementById(whichTab).className = "selectedTabClass";
  }

IE が一貫して Firefox のように動作するようにするには、何かする必要がありますか?

4

2 に答える 2

0

私はこの問題を解決できましたが、その微妙な原因は?、私は把握していません。修正しましたが、そもそもなぜ「壊れた」のかわかりません。

前述のように、ホスティング プロバイダーにある Web サイトにアクセスするときに IE 10.0.9200 を使用している場合にのみ、Web サイトの CSS スタイルが「見つからない」という問題が発生していました。

社内の開発サーバー上でローカルに動作している当社の Web サイトにアクセスした場合、IE 10.0.9200 はまったく問題ありませんでした。同じ IE ブラウザー バージョンがローカル開発サーバーでこの問題を示さなかったため、ホスティング プロバイダーの Web サーバー設定 (または社内開発 Web サーバーとは異なるもの) であると考えました。

当社の Web サイトでは、タブ付きツールバーの CSS「className」を動的に変更して、どのタブが選択されているかを示します。各タブは 'label' html 要素です。

タブには 2 種類の CSS 変更があります:
(1) JavaScript のコード行document.getElementById('tab3').style.backgroundColor = "white"
(2) その直後、特定の場合のみ、変更しました。次の方法によるタブのクラス名: document.getElementById('tab1').className = "showThisTabIsSelectedCssClass";

開発サーバーで実行されているFirefox および IE 10.0.9200 では、CSS を変更する直前に、特定の条件下で行っていた style.backgroundColor の変更が「className」の変更によって「一掃」(またはリセット) されたように見えました。タブ要素の「className」。

また、Firefox は、オープン Web で Web サイトにアクセスしたときに、同じことを行いました (「className」をリセットすると、style.backgroundColor の変更が消去またはリセットされます)。

しかし、何らかの理由で、同じバージョンの IE 10.0.9200 は 、className が変更された場合でも、 style.backgroundColor="white"の変更を破棄しませんでした。style.backgroundColor="white" はタブ要素の背景を白に変更し、次に特定の条件下で「className」を変更しました。新しい CSS クラスはタブに青色の backgroundColor を適用しましたが、白い backgroundColor は className の後にまだ存在していました。変化する。

なぜ IE 10.0.9200 でこの問題が発生したのは、ホスティング プロバイダーでオンラインでホストされている Web サイトを表示したときだけであり、ローカルの開発マシンで Web サイトを表示しているときではなかったのです。

この修正では、最終的にタブ要素の CSS クラス名を変更する必要があることをコードの少し前に事前に決定することにより、コードstyle.backgroundColor="white"の行を条件付きで回避する必要がありました。

つまり、IE 10.0.9200 は、要素の「className」を変更した後でも、新しい CSS クラスが独自の backgroundColor を課したにもかかわらず、style.backgroundColor="white" 設定を保持していました。

于 2013-10-14T15:34:12.387 に答える