Question

我正在尝试为我的学校网页制作一个CSS菜单。我一直在Mac上开发我的网站，并让它按照我想要的方式工作。我已经在safari，firefox和chrome以及windows上的firefox上进行了测试，所有这些工作都很好，我将鼠标悬停在链接菜单上，然后它就会掉线。

css for menu

#menu
{
 position:relative;
 top:-83px;
 left:60%;
 font-size:30px;
 width:250px;
}


#menu ul
{
 position:absolute;
 list-style-type:none;
 background-image:url('../images/linkBG.png');
 background-repeat:no-repeat;
 background-position: 38px 0px;
 width:250px;
}

#menu li ul
{
 display:none;
 list-style-type:none;
 background-image:url('../images/menuBG.png');
 background-repeat:repeat-y;
 font-size:20px;
}


 #menu a:link {color:rgb(255,0,0);}
 #menu a:visited {color:rgb(255,255,0);}
 #menu a:hover {color:rgb(255,0,255)}
 #menu a:active {color:rgb(255,255,255);}

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

 #menu li ul li
 {
 padding-left:0px;
 padding-top:10px;
 padding-bottom:10px;


 }

在IE（ver6和ver8）上尝试时，链接菜单会自动重新定位（向上移动约50px并重叠标题），背景图像向右移动约30px，菜单不再下降当鼠标悬停在文本上时。我听说IE很难开发，但这只是愚蠢的。我已经看到一个解决方案，涉及一些脚本来解决这个问题，但我不能使用脚本，因为这是一个分配（将在Windows机器上标记，所以它有很高的机会击中IE）。除了错误的菜单之外，还有一个表格，我使用margin-left:auto和margin-right:auto再次在所有浏览器中工作正常，除了IE。有什么方法可以解决这个问题吗？有没有替代悬停，适用于所有浏览器。

感谢。

菜单的HTML代码

<div id="menu">
    <ul>
        <li>Links Menu
            <ul>
                <li><a href="#info">Details</a></li><!--This may be #details-->
                <li><a href="#home_town_float">Home town</a></li>
                <li><a href="#course">My Course</a></li>
                <li><a href="#listdemo">Books, Music and Films</a></li>
                <li><a href="#tabledemo">Timetable</a>     </li>
                <li><a href="#formdemo">Search</a></li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

查看菜单上的边距和填充以及上方的标题。 IE有时会在彼此接壤的对象同时具有边距和填充时误解它们。如果您能够用更多填充或不同的定位替换边距，则可能会修复它。

否则，最简单的方法可能是使用IE条件语句为Explorer提供不同版本的CSS类。我怀疑他们被认为是剧本，但我不知道。示例：

<!--[if IE]>
    #menu {
         /* different positioning for IE only */
         top: ____;
         left: ____;
    }
<![endif]-->

CSS菜单。适用于IE以外的所有浏览器

1 个答案: