0

我正在尝试创建一个菜单并为其设置样式。我还使用了一些 CSS 动画来显示悬停时的描述（跨度）。此菜单在 Firefox 下正常工作。但在 Chrome 中，菜单上方有一个空白区域。当我通过 Firebug 检查 li 标签时，它告诉我 li 元素没有正确对齐。它向上移动。它没有发生在Firefox上。（请检查下面的屏幕截图）。我怎样才能解决这个问题？

更新：我刚刚将网站上传到 Heroku：http ://aqueous-wildwood-4051.herokuapp.com/ 。您将在此实时站点中看到该问题。

在铬： 在此处输入图像描述

在火狐中： 在此处输入图像描述

这是我的侧边栏的代码：

    <aside id="sidebar" role="complementary">
      <nav id="side-nav" role="navigation">
        <ul>
          <li  ><a href="/"><div id='side-nav-home' class='listitem'><span class='listtitle'>Home</span><span class='description'>Home page of SLNYAA</span></div></a></li>
          <li  ><a href="/about"><div id='side-nav-about' class='listitem'><span class='listtitle'>About Us</span><span class='description'>Learn more about us</span></div></a></li>
          <li  ><a href="#"><div id='side-nav-handbook' class='listitem'><span class='listtitle'>Handbook</span><span class='description'>Read our handbook</span></div></a></li>
          <li  ><a href="#"><div id='side-nav-join' class='listitem'><span class='listtitle'>Join Us</span><span class='description'>Join our program</span></div></a></li>
        </ul>
      </nav>
    </aside>

这是CSS：

    #sidebar {
        border-left: 1px solid #EDEDED;
        box-shadow: -3px 0 9px rgba(217, 217, 217, 0.2);
        float: right;
        min-height: 365px;
        width: 24%;

        #side-nav{


            ul {
                margin-top: 0px !important;
                height: 187px;
                list-style: none outside none;
                margin-left: 0;
                padding-left: 0;
                width: 100%;

                li{
                    height: 46px;

                    a{
                        text-decoration: none;
                        font-size: 14px;
                        color: #fff;
                        text-shadow: 1px 1px 1px #757575;
                        border-right: 1px solid rgba(217, 217, 217, 0);
                        -webkit-transition: all 0.3s ease-in;
                        -moz-transition: all 0.3s ease-in;
                        -o-transition: all 0.3s ease-in;
                        -ms-transition: all 0.3s ease-in;
                        transition: all 0.3s ease-in;


                        .listitem {
                            list-style: none outside none;
                            height: 32px;
                            text-align: center;
                            padding-top: 10px;
                            -webkit-transition: all 0.3s ease-in;
                            -moz-transition: all 0.3s ease-in;
                            -o-transition: all 0.3s ease-in;
                            -ms-transition: all 0.3s ease-in;
                            transition: all 0.3s ease-in;



                            .description {
                                visibility: hidden;
                                position: absolute;
                                font-size: 12px;
                                color: #FFFFFF;
                                font-weight: bold;
                                position: absolute;
                                margin-left: 8px;
                                margin-top: 4px;
                                opacity: 0;
                                -webkit-transition: all 0.6s ease-in;
                                -moz-transition: all 0.6s ease-in;
                                -o-transition: all 0.6s ease-in;
                                -ms-transition: all 0.6s ease-in;
                                transition: all 0.6s ease-in;
                            }



                            &:hover {
                                text-align: left;


                                .description {
                                    visibility: visible;
                                    opacity: 1;
                                }

                                .listtitle{
                                    margin-left: 7px;
                                    border-right: 1px solid #FFFFFF;
                                    padding-right: 7px;   
                                }
                            }
                        }


                    }
                }

                #side-nav-home{
                    background-color: #ED0042;
                    border: 2px solid #E87998;
                }

                #side-nav-about{
                    background-color: #e1cf3b;
                    border: 2px solid #C4BD80;
                }

                #side-nav-handbook{
                    background-color: #009dda;
                    border: 2px solid #5EADCC;
                }

                #side-nav-join{
                    background-color: #6ba01e;
                    border: 2px solid #98AB7D;
                }


            }
        }     
    }
4

1 回答 1

1

添加display: block到aCSS 样式

#main-container-border #main-container #sidebar #side-nav ul li a {
    display: block;
    text-decoration: none;
    font-size: 14px;
    color: #fff;
    text-shadow: 1px 1px 1px #757575;
    border-right: 1px solid rgba(217, 217, 217, 0);
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

jsfiddle

于 2013-02-09T09:20:38.920 回答