html – CSS菜单IE7问题

发布时间：2020-12-14 22:46:10 所属栏目：资源来源：网络整理

导读：菜单适用于所有主流浏览器,但在IE7中看起来有所不同.请参阅下面的屏幕截图在http://jsfiddle.net/FQLdm/6/查看演示将鼠标悬停在主页链接上时,您将看到一个子菜单.在IE7中,菜单按钮和子菜单都被向上推. 这发生在我替换它的时候 .menu1 ul.menu li{ position

菜单适用于所有主流浏览器,但在IE7中看起来有所不同.请参阅下面的屏幕截图
在http://jsfiddle.net/FQLdm/6/查看演示

将鼠标悬停在主页链接上时,您将看到一个子菜单.在IE7中,菜单按钮和子菜单都被向上推.

这发生在我替换它的时候

.menu1 ul.menu li{
    position: relative;
    list-style-type: none;
    display:block;
    float:left;
}

有这个(我需要使用这种方式内联块来居中列表项)

.menu1 ul.menu li{
    position: relative;
    list-style-type: none;
    display:inline;
    display:inline-block;
    *display:inline; /*IE7*/
    *zoom:1; /*IE7*/
}

在Chrome中它看起来很好

在IE7中它看起来不同.请注意主页按钮是如何抬起的.它看起来应该像上面的chrome截图.

最佳答案

在你的李中写下vertical-align：middle.像这样：

.menu1 ul.menu li{
  vertical-align:middle;
  position: relative;
  list-style-type: none;
    display:inline;
    display:inline-block;
    *display:inline; /*IE7*/
    *zoom:1; /*IE7*/

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!