1

下部に 2 つの円が表示される Web ページ ( http://goo.gl/Bfnm6を参照) があります。IE 以外のブラウザ (およびバージョン > 8 の場合は IE) の場合、円は CSS によって生成されます。IE8 以下の場合、これらのブラウザーは CSS を使用して円を生成できないため、円は .PNG ファイルとしてレンダリングされます。

私の問題は、IE8 以下が見つかったときに条件付き書式設定が .PNG ファイルを正しく提供しますが、CSS で生成された円を含む div を削除するために呼び出される Javascript が div を削除しないことです。その結果、以下のスクリーンショットにアーティファクトが表示されます。アーティファクトは div 内に含まれるテキストであり、CCS 宣言が含まれます。誰が私が間違っているのか教えてもらえますか?

私は次のことを試しましたが、すべての場合でアーティファクトが残ります:

  1. 以下のコード ブロックに示すように、 jQuery を使用.empty()して divを呼び出します。
  2. document.getElementById("advisers-css-image").innerHTML=""プレーンな Javascript を使用して呼び出し、div の内部 HTML を "" に設定します。document.getElementById("industry-css-image").innerHTML=""
  3. 電話document.getElementById("advisers-css-image").style.visibility="hidden"してdocument.getElementById("industry-css-image").style.visibility="hidden"

スクリーンショット ここに画像の説明を入力

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>    
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>

<!--[if lt IE 9]>
<div class="advisers display-inline-block">
<a href="#" id="advisers-png-image">
  <img src="images/advisers220x220.png?format=300w" alt=""> 
</a>
</div>

<div class="display-inline-block">
<a href="#" id="industry-png-image">
  <img src="images/industry220X220.png?format=300w" alt="">
</a>
</div>

<script type="text/javascript">
$( "#advisers-css-image" ).empty();
$( "#industry-css-image" ).empty();
$( "#advisers-circle-text" ).empty();
$( "#industry-circle-text" ).empty();
</script>
<![endif]-->

<a href="#" id="advisers-css-image">
  <div id="advisers-circle-text "class="circle display-inline-block hovershadow advisers advisers-box-shadow text">Professional
    advisers</div>
</a>

<a href="#" id="industry-css-image">
  <div id="industry-circle-text"class="circle display-inline-block hovershadow industry industry-box-shadow">Industry</div>
</a>
4

2 に答える 2

1

@Scott が指摘したように、問題は、HTML がレンダリングされる前にスクリプトが実行されていることです。スクリプトを HTML の上に移動するか、DOM 対応で実行できます。

これでうまくいくはずです：

<script>
  $(function(){
    $('#advisers-css-image, #industry-css-image').remove();
  });
</script>
于 2013-04-04T20:16:36.737 に答える