Question

我有一个不适合firefox 3（以及可能的其他版本）的菜单

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

</div>

CSS

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

什么是我最好的解决方案....添加一个火狐版条件声明，要求人们升级（我知道ff 11工作正常）还是有另一个更优雅的解决方案？

Answer 1

我怀疑这里的问题是这个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>

我怀疑这是解析html后FF11正在显示的内容。您可以使用Firebug（或类似的）来查看html

来验证这一点

Firefox 3带有图像链接并翻转

1 个答案: