Question

我遇到了IE的严重问题，我有一个简单的菜单，可以在Firefox和Chrome中正确显示，但IE是一个痛苦的屁股..

似乎IE没有正确显示<li>标记，因此我的下拉菜单在IE中不起作用。有人可以帮我吗？

这是菜单的完整代码，如果您复制 - 粘贴，那么您可以看到我的意思。

<style type="text/css">
#cssmenu{
    border-bottom:1px solid #efefcf;
    margin:0px;
    padding:0px;
    font-family:verdana,geneva,arial,helvetica,sans-serif;
    font-size:14px;
    color:8e8e8e;
    width:1000px;
    clear:both;
    }
#cssmenu ul{
    background:url(images/menu-bg.gif) top left repeat-x;
    height:43px;
    list-style:none;
    margin:0;
    padding:0;

    }
    #cssmenu li{
        float:left;
        padding:0px 8px 0px 8px;
        display: inline;
        }
    #cssmenu li a{
        color:#000000;
        *display:inline-block;
        line-height:43px;
        padding:0px 25px;
        text-align:center;
        text-decoration:none;
        display: inline;
        }
        #cssmenu li a:hover{
            color:#000000;
            text-decoration:none;
            display: inline;
            }
    #cssmenu li ul{
        background:#FFFFFF;
        border-left:1px solid #000000;
        border-right:1px solid #000000;
        border-bottom:1px solid #000000;
        display:none;
        height:auto;
        filter:alpha(opacity=95);
        opacity:0.95;
        position:absolute;
        width:175;
        z-index:200;
        /*top:1em;
        /*left:0;*/
        }

    #cssmenu li:hover ul{
        display:block;
        }
    #cssmenu li li {
        display:block;

        padding:0px;
        width:225px;
        }
    #cssmenu li ul a{
        display:block;
        font-size:12px;
        font-style:normal;
        text-align:left;
        width:200px;
        }
        #cssmenu li ul a:hover{
            background:#f7cab9;
            color:#000000;
            opacity:1.0;
            filter:alpha(opacity=100);
            width:125px;
            float:left;
            }
    #cssmenu p{

        }   
    #cssmenu .active > a{
        background:url(images/current-bg.gif) top left repeat-x;
        color:#ffffff;
        }
    #cssmenu .active > a:hover {
        color:#ffffff;
        }


/** breadcrumb **/
ul.sf-menu, ul.sf-menu ul{display:block;margin:0;padding:0}
ul.sf-menu li{padding:0;list-style:none;margin:0;padding:0px 28px;float:left; display:inline;}
ul.sf-menu li.first{padding-left:0px}
ul.sf-menu a{font-size:12px;color:black;display:block;text-transform:uppercase}
ul.sf-menu ul{position:absolute;top:35px;width:170px;border:1px solid #626165;padding:10px 0px;background:white}
ul.sf-menu ul a{font-size:12px;text-transform:none;width:150px;padding:2px 10px}
ul.sf-menu ul li{padding:0px;display:block;position:relative;float:none;width:170px}
ul.sf-menu ul a:hover, ul.sf-menu ul li.sfHover a{background:#f7cab9}
ul.sf-menu ul ul{position:absolute;z-index:10;left:162px;top:5px}
ul.sf-menu ul li.sfHover ul a{background:none}
ul.sf-menu ul li.sfHover ul a:hover, ul.sf-menu ul li.sfHover ul li.sfHover a{background:#f7cab9}
</style>

<div id="cssmenu">
<?php

    echo "<ul class='sf-menu'>
            <li class='first'>
            <a title='Dashboard' href='index.php?page=dashboard&user=".$_SESSION['username']."'>Dashboard</a>
                <ul>
                    <li class=''>
                    <a title='Nieuwe call' href='index.php?page=new_call&user=".$_SESSION['username']."'>Nieuwe Call</a>
                    </li>
                </ul>
            </li>

            <li class=''>
            <a title='Contact' href='index.php?page=contact&user=".$_SESSION['username']."'>Contact</a>
            </li>

            <li class=''>
            <a title='Uitloggen' href='index.php?action=logout&user=".$_SESSION['username']."'>Uitloggen</a>
            </li>
        </ul>";

?>
 </div>

Answer 1

您需要将<!DOCTYPE html>添加到文件的顶部，因为IE依赖于doctype来了解要使用的渲染引擎。

菜单在IE中无法正确显示

1 个答案: