html - css 菜单中除最后一个子元素外的所有子元素都向左移动一个像素

Question

我在这里撕扯我的头发。 我正在构建的站点上有水平下拉菜单。菜单由一个无序列表组成，下拉部分由隐藏的子元素组成，当您滑过父元素时会弹出这些子元素。 在 Firefox 中，一切似乎都很好，但在 Chrome 和 Safari 中，虽然每个菜单中的最后一个子元素都按预期运行，但所有其他子元素都被一个像素分流了。因此，在下面的示例中，Child A3、Child B4 和 Child C2 与它们各自的父级完全对齐，而其余的则不是。 有人可以阐明这里出了什么问题吗？ 下面的代码和屏幕截图...

How it should look...

How it actually looks...

我已经包含了 CSS 的整个导航 block ，以防我遗漏了实际父/子部分之外的内容。

HTML

<nav>
    <div id="menu" class="menustrip">
        <ul>
            <li class="page_item">
                <a href="http://www.mysite.com/services">Parent A</a>
                <ul class='children'>
                    <li class="page_item"><a href="http://mysite.com/">Child A1</a></li>
                    <li class="page_item"><a href="http://mysite.com/">Child A2</a></li>
                    <li class="page_item"><a href="http://mysite.com/">Child A3</a></li>
                </ul>
            </li>
            <li class="page_item"><a href="http://www.mysite.com/products">Parent B</a>
                <ul class='children'>
                    <li class="page_item"><a href="http://mysite.com/">Child B1</a></li>
                    <li class="page_item"><a href="http://mysite.com/">Child B2</a></li>
                    <li class="page_item"><a href="http://mysite.com/">Child B3</a></li>
                    <li class="page_item"><a href="http://mysite.com/">Child B4</a></li>
                </ul>
            </li>
            <li class="page_item"><a href="http://www.mysite.com/products">Parent C</a>
                <ul class='children'>
                    <li class="page_item"><a href="http://mysite.com/">Child C1</a></li>
                    <li class="page_item"><a href="http://mysite.com/">Child C2</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

CSS

#menu, #main-nav{
    width: 950px;
    margin:  0 30px 0 0;
    padding-right: 30px;
    border-bottom-style: solid;
    border-bottom-width: 8px;
    border-bottom-color:  #78B2E2;
    text-align: right;  
}

ul#main-nav{
    list-style: none;
    padding-top: 10px;
    margin-right:30px;
}

.page_item, .navlink{
    display: inline-block;
    background-color: #243488;
    height: 34px;
    width: 110px;
    margin-left: 1px;
    text-align: center;
}

.page_item a, .navlink a{
    padding-top: 4px;
    display: block;
    height: 34px;
    width: 110px;
}

.page_item:hover, .navlink:hover{
    background-color: #78B2E2;  
}

.page_item:active, .navlink:active{
    background-color: #78B2E2;  
}

    /* Hide Sub Menus by default */  
       #menu ul li ul.children {  
        display:none; 
        z-index:100; 
    }  

       /* Display Sub Menus on rollover of parent */  
    #menu ul li:hover ul.children {  
        display:block;  
        position:absolute;  
        top:205px; 
        margin: 0 0 0 -11px; /*pull child menus in line with parent */  
        width: 132px;
        list-style: none;  
    }  

       /* Style sub menu items not to float like parent items */  
    #menu ul li ul.children li {  
        float:none;  
        width:110px;  
        height: 34px;
        background-color:#243488;           
        border-top: 3px solid #ffffff; 
        font-size: 11px;
    }

        #menu ul li ul.children li:hover {   
        background-color:#78B2E3;
        color:#243488;   
    }

    /* Sub Menu link color  */
    #menu ul li ul.children li a:hover {  
        color:#243488;  
    }

    #menu ul li ul.children li a {  
        color:#ffffff;  
    }

Answer 1

不确定是什么原因造成的，但这与 <ul class="children"> 中的列表项有关。是行内 block 并且 ul 本身居中。

所以你有两个解决方案:将 ul 向左对齐而不是居中

.children {text-align:left;}

或者，将其列表项设为 block 而不是内联 block 。

.children > li {display:block;}

这些调整中的任何一个都会消除显示异常。在这两种情况下，您还必须增加左边距，但我相信这不会成为问题。