Question

我正在为之工作的公司决定采用新的电子商务软件，并且我一直在重新设计原始模板。我已经能够编写一个CSS精灵菜单，可以在FF和Chrome中很好地呈现，但是甚至不会在IE中显示。虽然它不会在IE中呈现，但它确实会导致巨大的间距问题（特别是，一个巨大的空间）菜单应该是，没有图像。我已经能够验证CSS，但HTML是自动生成的（谢谢，模板软件！），我无法成功验证它。

我承认我不是一名专家编码员，但我已经查看并尝试过本网站上与此主题相关的不同帖子的解决方案，但没有成功。显然我们需要网站至少在所有浏览器上显示菜单，所以如果你能帮我排除故障，我会非常感激。

这是网站，所以你可以看看。 http://11102611542.3dcart.net/

以下是菜单的CSS：

.home{}
.about{}
.industry{}
.catalog{}
.blog{}
.account{}
.contact{}

ul#topMenu{
    list-style:none;
    margin:20px 0 0 0;
    width:980px;
}

ul#topMenu li {display:inline;}

ul#topMenu li a{
    display:block; 
    float:left;
    height:40px;
    background-image:url("/assets/images/menuBar/MenuFull.png");
    font-size:0px;
    /*padding:40px 0 0 0;*/
    /*margin-top:40px;*/
    /*overflow:hidden;*/
    /*text-wrap:none;*/ 
    /*text-indent:-9000px;*/

    }

ul#topMenu li a.home{
    width:109px; background-position:0 0;

    }

ul#topMenu li a.about{
    width:100px; background-position:-109px 0px;
    }

ul#topMenu li a.industry{
    width:213px; background-position:-209px 0px;
    }

ul#topMenu li a.catalog{
    width:130px; background-position:-422px 0px;
    }

ul#topMenu li a.blog{
    width:86px; background-position: -552px 0px;
    }

ul#topMenu li a.account{
    width:170px; background-position: -638px 0px;
    }

ul#topMenu li a.contact{
    width:172px; background-position: -808px 0px;
    }

ul#topMenu li a.home:hover{
    background-position:0 -40px;
    width:109px;
    }

ul#topMenu li a.about:hover{
    width:100px; background-position:-109px -40px;
    }

ul#topMenu li a.industry:hover{
    width:213px; background-position:-209px -40px;
    }

ul#topMenu li a.catalog:hover{
    width:130px; background-position:-422px -40px;
    }

ul#topMenu li a.blog:hover{
    width:86px; background-position: -552px -40px;
    }

ul#topMenu li a.account:hover{
    width:170px; background-position: -638px -40px;
    }

ul#topMenu li a.contact:hover{
    width:172px; background-position: -808px -40px;
}

HTML：

<ul id="topMenu">
<li><a href="/home.asp" class="home">Home</a></li>
<li><a href="/About-Us_ep_7.html" class="about">About Us</a></li>
<li><a href="/Shop-By-Industry_ep_42.html" class="industry">Industry Guide</a></li>
<li><a href="http://www.fusionclimb.com/flippingBook/fusion%20climb%20product%20catalog/index.html" class="catalog">Catalog</a></li>
<li><a href="/blog.asp" class="blog">Blog</a></li>
<li><a href="/myaccount.asp" class="account">My Account</a></li>
<li><a href="/crm.asp?action=contactus" class="contact">Contact Us</a></li>
</ul>

Answer 1

我会从头开始，我知道它很痛苦，但使用第三方软件中的任何类型的模板都是一个非常糟糕的理想。他们不会从浏览器到浏览器进行检查，构建该应用程序的程序员可能不会像您那样先进。我的建议是摆脱所有表格。它非常古老的风格编程。祝你好运

Answer 2

您的网站在IE中以quriks模式显示，这就是您无法看到菜单的原因。空间就在那里，因为菜单堆叠而不是浮动。我建议将doctype更改为严格，但我可以看到，由于您使用的是第三方模板软件，因此您将遇到问题。如果您无法手动更改，请打电话告诉他们问题所在。

我希望这会有所帮助。

Answer 3

为什么你使用太多的表格进行布局？为您的两个width="100%" height="100%"

添加两个sub-table

<table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%">  <-- here
<tr>
<td width="17"><img src="assets/templates/v40010/images/search_L.png" width="17" height="36" alt=""></td>
<td><input type="text" size="25" name="keyword" id="searchlight" class="search-text" onFocus="javascript:if (document.searchForm.keyword.value=='search by keyword') {document.searchForm.keyword.value='';};" onblur="if(this.value.length == 0) this.value = 'search by keyword'" value="search by keyword"></td>
<td><input type="image" src="assets/templates/v40010/images/search_btn.png" name="search" value="GO"></td>
</tr>
</table>
</form>
<!--END: FRAME_SEARCH--></div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td>
<table cellspacing="0" border="0" width="100%" height="100%">  <-- here
<tr>
<ul id="topMenu">
<li><a href="/home.asp" class="home" id="topMenu">Home</a></li>
<li><a href="/About-Us_ep_7.html" class="about" id="topMenu">About Us</a></li>
<li><a href="/Shop-By-Industry_ep_42.html" class="industry" id="topMenu">Industry Guide</a></li>
<li><a href="http://www.fusionclimb.com/flippingBook/fusion%20climb%20product%20catalog/index.html" class="catalog" id="topMenu">Catalog</a></li>
<li><a href="/blog.asp" class="blog" id="topMenu">Blog</a></li>
<li><a href="/myaccount.asp" class="account" id="topMenu">My Account</a></li>
<li><a href="/crm.asp?action=contactus" class="contact" id="topMenu">Contact Us</a></li>
</ul>
</tr>
</tr>
</tr>
</table>

<强>更新

为你fiddle，在我的ie8中测试得很好。并run code

Answer 4

你有id个重复，嵌套不当，标签打开等等。

您需要先解决这些严重的HTML问题。

http://validator.w3.org/check?uri=http%3A%2F%2F11102611542.3dcart.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

CSS Sprite菜单不会在IE8中显示

4 个答案: