简体   繁体   English

菜单在IE中无法正确显示

[英]Menu not showing correctly in IE

I'm having serious issues with IE, I have a simple menu which shows correctly in Firefox and Chrome, but IE is a pain in the ass.. 我在IE方面遇到严重问题,我有一个简单的菜单,可以在Firefox和Chrome中正确显示,但是IE实在是难上加难。

It seems that IE doesn't show the <li> tag properly, so my dropdown menu doesn't work in IE. 看来IE无法正确显示<li>标记,因此我的下拉菜单在IE中不起作用。 Can someone help me out? 有人可以帮我吗?

This is my JsFiddle: http://jsfiddle.net/PE597/ 这是我的JsFiddle: http : //jsfiddle.net/PE597/

This is the complete code for the menu, if you copy - paste this then you could see what I mean. 这是菜单的完整代码,如果您复制-粘贴此代码,那么您会明白我的意思。

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

您需要在文件顶部添加<!DOCTYPE html> ,因为IE依赖于doctype来确定要使用的呈现引擎。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM