0

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>

私の最善の解決策は何ですか....Firefoxバージョンの条件付きステートメントを追加して、アップグレードするように人々に依頼します（ff 11は正常に機能することを知っています）、または別のよりエレガントな解決策はありますか？

4

1 に答える 1

0

ここでの問題は、この 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 を表示することで、これを確認できます。

于 2012-05-02T16:58:07.060 に答える