html - 如何让显示 block 在移动设备和旧版本的 Firefox 上工作？

Question

我有一个 HTML 菜单，在 chrome、最新的 firefox 和 IE 上看起来不错，但在我的 ipad 和旧版本的 firefox 上看起来像垃圾。有什么办法可以让这项工作无处不在？

HTML:

    <div id="navbar">

            <ul>
                <a href=/interpreters.php><li> Interpreters</li></a>
                <li>Onsite
                    <ul>
                        <a href=/displayappointments.php?lookup=todayScheduled><li>Appointment Manager</li></a>
                        <a href =/newapp.php><li>New Appointment</li></a>
                    </ul></li>
                <li>Telephonic
                    <ul>
                        <a href =/otp.php><li>New Call</li></a>
                        <a href =/otplog.php><li>OTP Log</li></a>
                        <a href =/otpraw.php><li>OTP Raw</li></a>
                    </ul></li>    
                <a href=/translation.php><li>Translation</li></a>
                <li>Tools
                    <ul>
                        <a href=/teammessage.php><li>Team Message</li></a>
                        <a href=massemail.php><li>Mass Email</li></a>
                        <a href=uofuparser.php><li>U of U</li></a>
                        <a href=/incidenttracker/submitincident.php><li>Issue Tracker <? echo $count; ?></li></a>
                        <a href=medicaid.php><li>Medicaid<? echo $medcount; ?></li></a>
                     </ul></li>       
                <a href=sms.php><li>TXT<? echo $smscount; ?></li></a>
            </div>

CSS:

    #navbar {
    width:100%;
    height:30px;
    background-color:#FFFFFF;
    text-align: center; 
    }

    #navbar ul {      
    margin:0 auto 0 auto;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    text-align: center; 
    }

    #navbar ul li {
    float:left;
    color:#333366;
    padding:0 8px 0 8px;
    border-right:1px solid #0099FF;
    border-left:1px solid #0099FF;
    height:3SS0px;
    list-style:none;
    display:block;
    line-height:30px;
    text-align:center;
    cursor:pointer;
    border-radius: 9px;
    border-top-right-radius: 9px;
    }

    #navbar ul li:hover {
    background-color:#e8edff;
    }

    #navbar ul li ul{
    display:none;
    position:absolute;
    background-color:transparent;
    padding:10px;
    opacity:0.95;
    }

    #navbar ul li ul li{
    float:none;
    padding:0;
    margin:0;
    width:150px;
    color:#333366;
    background-color:#FFFFFF;
    text-decoration:none;
    z-index:100;
    }

    #navbar ul li ul li a{
    color:#333366;
    text-decoration:none;
    }

    #navbar ul li ul li a:hover{
    color:#333366;
    }   

    #navbar ul li:hover > ul{
    display:block;
    }

JS fiddle : http://jsfiddle.net/n9TGH/

如果正确显示，它看起来像这样:在我的 iPad 和旧版本的 firefox 上，它看起来像这样:

Answer 1

通过查看您的 HTML 代码，我注意到它的格式不正确。当您使用 <li>他们应该在你的外面 HREF标签。你也没有指定结尾 </ul>标签。现代浏览器比旧版本更宽容。试试这个代码，看看它是否有帮助。

  <div id="navbar">
    <ul>
        <li><a href=/interpreters.php>Interpreters</a></li>
        <li>Onsite
            <ul>
                <li><a href=/displayappointments.php?lookup=todayScheduled>Appointment Manager</a></li>
                <li><a href=/newapp.php>New Appointment</a></li>
            </ul>
        </li>
        <li>Telephonic
            <ul>
                <li><a href =/otp.php>New Call</a></li>
                <li><a href =/otplog.php>OTP Log</a></li>
                <li><a href =/otpraw.php>OTP Raw</a></li>
            </ul>
        </li>
        <li><a href=/translation.php>Translation</a></li>
        <li>Tools
            <ul>
                <li><a href=/teammessage.php>Team Message</a></li>
                <li><a href=massemail.php>Mass Email</a></li>
                <li><a href=uofuparser.php>U of U</a></li>
                <li><a href=/incidenttracker/submitincident.php>Issue Tracker <? echo $count; ?></a></li>
                <li><a href=medicaid.php>Medicaid<? echo $medcount; ?></a></li>
             </ul>
        </li>
        <li><a href=sms.php><li>TXT<? echo $smscount; ?></a></li>
    </ul>
  </div>