jquery - IE8及以下条件格式

Question

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

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

我尝试了以下方法，但在所有情况下，工件仍然存在:

1. 使用 jQuery 在 div 上调用 .empty()，如下面的代码块所示
2. 使用纯 Javascript 调用 document.getElementById("advisers-css-image").innerHTML="" 和 document.getElementById("将 div 的内部 HTML 设置为“” Industry-css-image").innerHTML=""
3. 调用 document.getElementById("advisers-css-image").style.visibility="hidden" 和 document.getElementById("industry-css-image").style。可见性=“隐藏”

屏幕截图

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>