IE8及以下条件格式

Question

我有一个网页（请参阅http://goo.gl/Bfnm6），其底部显示两个圆圈。对于非IE浏览器（以及IE，如果版本> 8），圆圈由CSS生成。对于IE8及更低版本，圆圈将呈现为.PNG文件，因为这些浏览器无法使用CSS生成圆圈。

我的问题是，虽然我的条件格式在找到IE8或更低版本时正确地提供.PNG文件，但是应该调用Javascript以删除包含CSS生成的圆圈的div并不会删除div。结果是您在下面的屏幕截图中看到了工件。工件是div中包含的文本，后者又包含CCS声明。谁能告诉我我做错了什么？

我尝试过以下操作，但在所有情况下，工件仍然存在：

1. 使用jQuery在div上调用.empty()，如下面的代码块所示
2. 使用普通Javascript调用document.getElementById("advisers-css-image").innerHTML=""和document.getElementById("industry-css-image").innerHTML=""
将div的内部HTML设置为“”
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>

Answer 1

因为链接需要在条件格式的脚本之上。在脚本执行时，尚未呈现链接。

所以就这样移动它们：

<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>

<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>

<!--[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]-->

---

或者@Zach L在评论中说，您可以将条件格式设置脚本包装在.ready()函数中。这样做，你不需要改变你的标记：

<script type="text/javascript">
    $(document).ready(function() 
    {
        $( "#advisers-css-image" ).empty();
        $( "#industry-css-image" ).empty();
        $( "#advisers-circle-text" ).empty();
        $( "#industry-circle-text" ).empty();
    });
</script>

Answer 2

正如@Scott所指出的那样，问题是您的脚本在呈现HTML之前正在执行。您可以将脚本移动到HTML上方，或者在DOM-ready处执行它。

这应该可以解决问题：

<script>
  $(function(){
    $('#advisers-css-image, #industry-css-image').remove();
  });
</script>