html - 菜单栏在放大/缩小时未正确显示

Question

我有一个包含 6 个项目的菜单栏：

当我放大/缩小时，布局会发生变化：

为什么会发生这种情况？

CSS：

.menubar {
float:left;
width:920px;    
background:url(../images/nav-back.png) top left repeat-x;
height:52px;
    padding:9px 10px 8px 10px;
    margin-bottom:32px;
 }
.menubar ul {
   float:left;
   background:url(../images/nav-bg.gif) top left repeat-x;
   width:100%;
   display: block; 
}
.menubar li { float:left; background:url(../images/depth.gif) top right no-repeat;   }
.menubar li.last { background:none;  }
.menubar li.first a { padding:16px 42px 16px 43px; }
.menubar li.last a { padding: 16px 43px 16px 44px; }
.menubar li a { padding:16px 18px; display: block; }

Answer 1

这是因为代码的一部分在percents，另一部分是固定大小的。但是由于您的问题中没有代码，我不能说如何改进它。

Answer 2

正如@loler 所说，这可能发生在固定大小的属性上。尝试使用 em（或百分比）来制作所有尺寸属性。那应该可以解决您的问题。Em 是一个相对值，取决于浏览器的字体大小。因此，如果您滚动进出该站点，该站点的外观总是相同的。