IE8及以下條件格式

Question

我有一個網頁（見http://goo.gl/Bfnm6），其底部出現兩個圓圈。對於非IE瀏覽器（如果版本大於8，也是IE），這些圓圈由CSS生成。對於IE8及更低版本，圓圈呈現爲.PNG文件，因爲這些瀏覽器無法使用CSS生成圓圈。

我的問題是，雖然我的條件格式正確服務於.PNG文件，當發現IE8或更低版本時，應該被調用去除包含CSS生成的圓的div的div不會刪除div。結果是，您會在下面的屏幕截圖中看到工件。工件是div中包含的文本，其中包含CCS聲明。任何人都可以告訴我我做錯了什麼？

我試過以下，但在所有情況下，文物依然存在：

1. 使用jQuery呼籲div的.empty()如下面的
2. 代碼塊div的內部HTML設置看「」 通過使用普通的JavaScript調用document.getElementById("advisers-css-image").innerHTML=""和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> 

Answer 1

由於@Scott指出，問題是，HTML呈現在你的腳本執行。您可以將腳本移動到HTML上方，或者在DOM準備就緒的情況下執行它。

這應該做的伎倆：如果你使用jQuery，爲什麼不只是做類似`$（ '＃顧問CSS的形象，＃行業CSS-圖像'）

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

Answer 2

這是因爲鏈接需要在條件格式上面的腳本。在腳本執行時，鏈接還沒有被渲染。

所以移動起來是這樣的：

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