css - 在 firefox 上运行良好，但在 google chrome 和浏览器调整大小方面有一些问题？

Question

我已经创建了菜单。这在 firefox 中工作得很好，但在 google chrome 中，悬停不显示。此外，当我调整浏览器的大小时，菜单的一部分会隐藏且不可滚动，我尝试使用 MENU width:100%;，但是当我这样做并调整浏览器大小时，类布局会扭曲并显示超出菜单线，菜单失真。无论如何要解决这个问题: 所以我强制将菜单的宽度定义为 1366px 以避免菜单失真。请帮忙。

#mainmenu {
    width:1366px;
    height:50px; 
    /*position:relative;*/
    position:fixed;
    top:18px;
    padding-left:200px;  
    line-height:50px;
    background:#0b2c3d;
    z-index:10;      
    box-shadow:5px 0px 15px #7e7a7a; 
}
#mainmenu, #dd_home, #dd_profile, #dd_achv, #dd_contact,#dd_login {
    cursor:pointer;
}
#mainmenu ul {
    list-style-type:none;
    margin:0px;
    padding:0px;        
}
#mainmenu ul li {
    text-decoration:none;
    float:left;
    /*border-right-style:dotted;*/
}
#mainmenu ul li a {
    text-decoration:none;
    display:block;
    width:150px;
    text-align:center;
    text-transform:uppercase;           
    color:white;
}
#mainmenu ul li.home {
    width:150px;
    text-align:center;
    margin-top:-5px;
    border-bottom:5px solid #0a68fb;
}
#mainmenu ul li.home:hover {
    display:block;
    background-color:#0a68fb;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
#mainmenu ul li.profile {
    margin-top:-5px;
    border-bottom:5px solid #ed4901;
}
#mainmenu ul li.profile:hover {
    display:block;
    background-color:#ed4901;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
#mainmenu ul li.achv {
    margin-top:-5px;
    border-bottom:5px solid #27fb06;
}
#mainmenu ul li.achv:hover {
    display:block;
    background-color: #27fb06;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
#mainmenu ul li.contact {
    margin-top:-5px;
    border-bottom:5px solid #b70bfb;
}
#mainmenu ul li.contact:hover {
    display:block;
    background-color:#b70bfb;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
#mainmenu ul li.contact:checked {
    margin-top:-5px;
    border-bottom:10px solid #b70bfb;
}
#mainmenu ul li.login {
    margin-top:-5px;
    border-bottom:5px solid #36b096;
}
#mainmenu ul li.login:hover {
    display:block;
    background-color:#36b096;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
#mainmenu ul li.nepal {
    margin-top:-5px;
    border-bottom:5px solid #f8d605;
    overflow:hidden;
}

HTML

<div id="mainmenu">
    <ul>
        <li class="home"><a href="about.aspx"> Home</a>
        <li class="profile"><a href="profile.aspx" >Profile</a>
        <li class="achv"><a href="achv.aspx">achievements</a>
        <li class="contact"><a href="Contact.aspx">Contact</a>
        <li class="login"><a href="login.aspx">Log in</a>
        <li class="nepal"><a href="#">jaya nepal</a></li>
    </ul>
</div>

JSFiddle: jsfiddle.net/gzeLS

Answer 1

从 :hover 样式中删除 display:block:

jsfiddle.net/gzeLS/1

或者，将 display:block 添加到非悬停样式:

jsfiddle.net/gzeLS/2

我不确定为什么 Chrome 不喜欢这样。我会说这是一个 Chrome 错误。

要使菜单调整大小，请使用 max-width 和 min-width 进行一些操作。在文本开始重叠之前，您只能获得大约 600 像素的宽度。通过给菜单一个 min-width 来防止重叠。

jsfiddle.net/gzeLS/3

但是，正如您已经发现的那样，当窗口太小时，部分菜单会被隐藏。即使您在 body 上设置了 min-width 以显示滚动条，您仍然无法滚动菜单，因为您使用的是 position: fixed .如果窗口低于特定宽度，最好的办法是使用媒体查询来缩小字体大小。

jsfiddle.net/gzeLS/4

编辑:这是我为获得 the third jsFiddle 所做的更改的细目分类无论窗口大小如何，都可以居中。

• 要使菜单填满页面，请指定left 和right，而不是指定width。
• 将菜单项置于中心:
  • 在菜单上使用text-align: center，而不是padding。这将考虑不同的窗口大小。
  • 在 ul 上设置 display: inline-block 使其可居中。
  • 在 ul 上设置 width 和 max-width。使用 width 允许我们按百分比调整 li 元素的大小，如果窗口太小，它们可以缩小。 max-width 让我们实际将菜单项居中，当窗口足够宽以适应菜单的全宽时，在左右两侧留出边距。<
• 要防止菜单项在屏幕太小时换行，请在 ul 上设置 white-space: nowrap。
• 当窗口太小无法容纳整个菜单时，要防止菜单项的文本重叠:
  • 在菜单上设置min-width。
  • 在菜单项上设置overflow: hidden。
• 为简单起见，我还将列表项中的冗余样式按类合并到 li 选择器中。

这是我在 the fourth jsFiddle 中所做的更改使菜单适合较小的窗口并保持可见:

• 从菜单中删除 min-width 以允许它缩小以适合窗口。
• 添加媒体查询样式以随着窗口大小逐渐减小字体大小:

@media all and (max-width: 640px) { #mainmenu { font-size: 90%; } }
@media all and (max-width: 590px) { #mainmenu { font-size: 80%; } }
@media all and (max-width: 530px) { #mainmenu { font-size: 70%; } }
@media all and (max-width: 468px) { #mainmenu { font-size: 60%; } }