1

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

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

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

  1. 使用 jQuery 调用.empty()div，如下面的代码块所示
  2. 通过使用纯 Javascript 调用document.getElementById("advisers-css-image").innerHTML=""和设置 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

3

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

所以像这样向上移动它们：

<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>
于 2013-04-04T20:11:35.467 回答
1

正如@Scott 指出的那样，问题在于您的脚本是在呈现 HTML 之前执行的。您可以将脚本移动到 HTML 之上，或在 DOM 就绪时执行它。

这应该可以解决问题：

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