如何让显示块在移动设备和旧版本的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小提琴： 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>