Css Firefox3，带有图像链接和滚动

我有一个菜单不适用于Firefox3（以及可能的其他版本）

|
| 
| 
| 
| 
| 

CSS

#图像菜单ul{线高度：20px；}
#图像菜单li{列表样式：无；高度：22px；显示：内联块；}
#图像菜单a{显示：内联块；}
.home_菜单{背景图像：url（/images/menu/home1.png）；背景重复：无重复；宽度：50px；}
.home_菜单：悬停{背景图像：url（/images/menu/home2.png）；}
.about{背景图像：url（/images/menu/about1.png）；背景重复：无重复；宽度：64px；}
.about:hover{background image:url（/images/menu/about2.png）；}
.stories{背景图像：url（/images/menu/stories1.png）；背景重复：无重复；宽度：88px；}
.stories:hover{background image:url（/images/menu/stories2.png）；}
.whats_on{背景图像：url（/images/menu/whats_on1.png）；背景重复：无重复；宽度：96px；}
.whats_on:hover{background image:url（/images/menu/whats_on 2.png）；}
.get_included{background image:url（/images/menu//behind_the_scenes1.png）；background repeat:no repeat；width:192px；}
.get_include:hover{background image:url（/images/menu/behind_the_scenes2.png）；}
.tickets{背景图像：url（/images/menu/tickets1.png）；背景重复：无重复；宽度：83px；}
.tickets:hover{background image:url（/images/menu/tickets2.png）；}
.contact{背景图像：url（/images/menu/contact1.png）；背景重复：无重复；宽度：83px；}
.contact:hover{background image:url（/images/menu/contact2.png）；}

---

我的最佳解决方案是什么……添加fire fox版本的条件语句，要求人们升级（我知道ff 11可以正常工作），或者是否有其他更优雅的解决方案？

我怀疑这里的问题是此html无效，因此需要一个像样的解析器来纠正问题

您不能将html更改为如下所示：

<div id="menu" style="margin-right: 10px;">
    <ul id="image-menu">
        <li class="home_menu"><a href="/#middle"></a></li> |
        <li class="about"><a href="/#top"></a></li> | 
        <li class="stories"><a href="/#right"></a></li> | 
        <li class="whats_on"><a href="/#bottom"></a></li> | 
        <li class="get_involved"><a href="/#left"></a></li> | 
        <li class="tickets"><a href="http://secure.theatreroyal.com/tickets/production.aspx?PID=308539"></a></li> | 
        <li class="contact"><a href="/index.php/twayf/contact"></a></li>
    </ul>
</div>

|
|
|
|
|
|

我怀疑这就是FF11解析html后显示的内容。

---

您可以通过使用Firebug（或类似工具）查看html来验证这一点，Firefox 3支持已停止，24日，Avril Mozilla将向所有FF3.x用户推送更新，因此可能不值得解决您的问题。您是否可以在jsfiddle.net中生成代码以查看图像……我想由于时间限制，我将不使用它。除非firefox版本4-10存在类似问题。任何人都知道如何在不设置虚拟机负载的情况下进行测试。ff3在ff起始页上提供了一条鼓励升级的消息，其他版本也一样吗？如果用户将主页设置为其他页面会发生什么情况？JS Fiddle Well这是一个不错的主意，很有意义，但不幸的是FF11是这样解析的：

| | | | | | | |
我没有得到FF3，但在FF3.6中，锚在

之前是关闭的，所以你得到的不是
，而是
，这是因为旧的FF解析器不理解html5的有效性（就像锚包装块元素一样）。如果问题是链接不起作用，那么如果你像我上面展示的那样重新格式化，我相信它会起作用——而且它是更普通的html——我看不到当前结构的任何好处
    <style type="text/css">

#image-menu ul {line-height: 20px;}

#image-menu li {list-style: none; height: 22px; display: inline-block;}

#image-menu a {display:inline-block;}

.home_menu {background-image: url(/images/menu/home1.png); background-repeat: no-repeat; width: 50px; }
.home_menu:hover {background-image: url(/images/menu/home2.png);}

.about {background-image: url(/images/menu/about1.png); background-repeat: no-repeat; width:64px; }
.about:hover {background-image: url(/images/menu/about2.png);}

.stories {background-image: url(/images/menu/stories1.png); background-repeat: no-repeat; width:88px; }
.stories:hover {background-image: url(/images/menu/stories2.png);}

.whats_on {background-image: url(/images/menu/whats_on1.png); background-repeat: no-repeat; width:96px; }
.whats_on:hover {background-image: url(/images/menu/whats_on2.png);}

.get_involved {background-image: url(/images/menu//behind_the_scenes1.png); background-repeat: no-repeat; width:192px; }
.get_involved:hover {background-image: url(/images/menu/behind_the_scenes2.png);}

.tickets {background-image: url(/images/menu/tickets1.png); background-repeat: no-repeat; width:83px; }
.tickets:hover {background-image: url(/images/menu/tickets2.png);}

.contact {background-image: url(/images/menu/contact1.png); background-repeat: no-repeat; width:83px; }
.contact:hover {background-image: url(/images/menu/contact2.png);}

</style>

<div id="menu" style="margin-right: 10px;">
    <ul id="image-menu">
        <li class="home_menu"><a href="/#middle"></a></li> |
        <li class="about"><a href="/#top"></a></li> | 
        <li class="stories"><a href="/#right"></a></li> | 
        <li class="whats_on"><a href="/#bottom"></a></li> | 
        <li class="get_involved"><a href="/#left"></a></li> | 
        <li class="tickets"><a href="http://secure.theatreroyal.com/tickets/production.aspx?PID=308539"></a></li> | 
        <li class="contact"><a href="/index.php/twayf/contact"></a></li>
    </ul>
</div>