IE 中的 JQuery 选项卡不显示图片

Question

我遇到的问题是我的图片没有显示在 IE8 及以下版本的动态 JQuery 选项卡中，但它们显示在所有其他浏览器中。我相信它与使用 JQuery 加载选项卡的方式有关，因为当我不加载代码时图片显示正常。我使用 JQuery .hide() 和 fadeIn() 函数来更改选项卡。

这是我所说内容的屏幕截图:http://www.marinicorp.net/jquerytabs.htm

这是网页本身的链接:http://www.marinicorp.net/services.aspx

如果您需要更多信息，请告诉我。

JQuery:

$(document).ready(function () {
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("selected").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabNavigation li").click(function () {

    $("ul.tabNavigation li").removeClass("selected"); //Remove any "active" class
    $(this).addClass("selected"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content

    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active ID content
    return false;
});

});

HTML:

<div id="tabs" class="tabs">
    <ul class="tabNavigation">
        <li><a href="#tabCon">Construction Services</a></li>
        <li><a href="#tabLand">Landscaping Services</a></li>
        <li><a href="#tabSnow">Plowing Services</a></li>
    </ul>
    <div id="tabCon" class="tab_content">
         <table style="position: absolute; top:35px; left:40px;">
       <tr>
       <td><img class="tables" src="Images/pipeLay.gif" /></td>
       <td><img class="tables" src="Images/projMan.gif" /></td>
       <td><img class="tables" src="Images/surveyeng.gif" /></td>
       </tr>
       </table>  
    </div>
    <div id="tabLand" class="tab_content">
<table style=" position: absolute; left:40px; top:35px;"> <tr>
       <td ><img class="tables" src="Images/playGrounds.gif" /></td>
       <td><img class="tables" src="Images/plantTrees.gif" /></td>
       <td><img class="tables" src="Images/genLand.gif" /></td>
       </tr>
       </table>               
    </div>
    <div id="tabSnow" class="tab_content">
      <table style=" position: absolute; left:40px; top:35px;">
       <tr>
       <td><img class="tables" src="Images/snowplow.gif" /></td>
       <td><img class="tables" src="Images/shovelers.gif" /></td>
       <td><img class="tables" src="Images/bobcat.gif" /></td>
       </tr>
       </table>     
    </div>
</div>

CSS:

.tab_content {padding: 19px 0 22px 16px}
#tabs{top:380px;left:-10px;position: absolute; z-index:3;}
#tabs .tables{margin: 0px 13px 0px 13px;padding: 0px;border: 2px outset #999999;z-     index:-1;}
UL.tabNavigation{list-style: none; margin: 0;padding: 0;}
UL.tabNavigation LI{display: inline;}
UL.tabNavigation LI A{padding: 10px 20px 10px 20px;background-color: #C0C0C0;text decoration: none;font-size: 12pt;color: #000000;font-family: Tahoma;}
UL.tabNavigation LI A.selected, UL.tabNavigation LI A:hover{border width:0px;background-color: #C0C0C0;padding: 10px 20px 13px 20px;color: #FFFFFF;font-size: 12pt;}        
UL.tabNavigation LI A:focus {outline: 0;}
div.tabs > div{padding: 5px;margin-top: 11px;width: 620px;height: 330px;}               
div.tabs > div h2 {margin-top: 0;}
#tabCon{background-color: #C0C0C0;}
#tabLand{background-color: #C0C0C0;}
#tabSnow{background-color: #C0C0C0;}
.waste {min-height: 1000px;}

Answer 1

今天有一个像这样的有趣的 - 原来是图像文件本身的编码!!!尝试使用烟花或 photyshop 或 gimp 或其他任何东西重新保存图像，看看会发生什么。

(当时很想说不要使用 ie8 ；))