Question

我正在尝试使用适应性很强的Wordpress主题的导航菜单，但是遇到了一个影响子菜单的非常奇怪的错误。

该错误总是在翻转子菜单的右侧添加1个像素，使其与父菜单项不对齐：

与Chrome比较：

但是，确切触发的内容很难确定：它始终会在内容低于折页（即存在滚动条）但断点较小的页面上触发，即使滚动条显示出来，可能或可能根本不触发。

有时只是将浏览器的大小调整为随机的较大尺寸，然后原始尺寸可以使该错误出现或消失，而无需更改代码。

使用Firefox的开发人员工具查看布局，似乎没有多余的像素被填充，因此这与this one here是一个不同的问题，该问题的解决方案对我也不起作用。

如果有人知道是什么原因造成的，我将不胜感激，因为它使我发疯。

以下是导航菜单的HTML标记（使用JavaScript动态生成）：

<nav class="main-navigation">
  <ul id="primary-menu" class="primary-menu menu">
    <li class="menu-item"><a href="http://localhost/wordpress">Home</a></li>
    <li class="menu-item"><a href="http://localhost/wordpress/about">About</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="http://localhost/wordpress/about/history/">History</a></li>
        <li class="menu-item"><a href="http://localhost/wordpress/about/people">People</a></li>
      </ul>
    </li>
    <li class="menu-item"><a href="http://localhost/wordpress/services/">Services</a></li>
    <li class="menu-item"><a href="http://localhost/wordpress/what-we-do">What We Do</a></li>
    <li class="menu-item"><a href="http://localhost/wordpress/the-library/">The Library</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="http://localhost/wordpress/the-library/gallery/">Gallery</a></li>
        <li id="menu-item" class="menu-item"><a href="http://localhost/wordpress/audio-and-video/">Audio and Video</a></li>
      </ul>
    </li>
    <li class="menu-item"><a href="http://localhost/wordpress/donate/">Donate</a></li>
    <li class="menu-item"><a href="http://localhost/wordpress/contact/">Contact</a></li>
  </ul>
</nav>

这是大部分相关CSS：

.primary-menu,
.primary-menu ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.primary-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: calc(var(--menuItemsSpacing) / -2);
    margin-right: calc(var(--menuItemsSpacing) / -2);
}

.primary-menu a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: initial;
    overflow: none;
}

.primary-menu .current-menu-item a {
    color:#FFF;
    background-color:#000; 
}

.primary-menu>li {
    font-size: 18px;
    font-family: 'Open Sans', sans-serif; 
    font-weight: 400;
    position:relative;
    margin-bottom: 20px;
}

.primary-menu>li a {
    padding: 10px 25px 10px 25px;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: color, background-color;
    transition-property: color, background-color; 
}

.primary-menu>li:hover a,
.primary-menu>li:focus a,
.primary-menu>li:active a {
    background-color: #000;
    color: #FFF;
}

.primary-menu .sub-menu {
    position: absolute;
    top: 100%;
    margin-top: var(--dropdownTopOffset);
    min-width: 100%;
    width:var(--dropdownMenuWidth);
    display:block;
    border-radius: 2px;
    background: var(--dropDownBackground);
}

.primary-menu .sub-menu li {
    font-size: 16px;
    font-weight: 400;
    text-transform: initial;
    line-height: 1.6;
        box-sizing: border-box;
}

.primary-menu .sub-menu li a {
    transition: 300ms padding ease-out;
}

.primary-menu .sub-menu li a:hover {
    padding-left:32px;
    color: var(--menuHoverColor);
}

.primary-menu .sub-menu li.current-menu-item a {
    color: var(--menuHoverColor)
}

.primary-menu .sub-menu li:not(:last-child) {
    border-bottom: var(--dropDownDivider)
}

.primary-menu>li>.sub-menu>li:not([data-submenu])>ul {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: none;
    transition: none
}

.primary-menu .menu-item-has-children,
.primary-menu .page_item_has_children {
    position: relative
}

.primary-menu>.customize-partial-edit-shortcut {
    margin-left: calc(var(--menuItemsSpacing) / 2)
}

Firefox上的CSS错误，有时会在子菜单中添加额外的1像素

0 个答案: