Question

好的，我有一个奇怪的问题，只发生在Chrome网页浏览器中。一切正常在firefox和ie。

我使用图片创建了一个导航菜单。我在每个列表项上放置填充以将它们分开。因此，当使用铬时，有时填充有效，有时则不然。如果我刷新页面几次填充停止工作，列表项不再有填充，再次刷新几次，它再次工作。我不知道造成这种情况的原因。如果有人有任何想法，我会在这里粘贴我的代码。我搜索的范围很广，似乎找不到其他人这个问题。

**编辑：**

我托管了图片并使用了codepen，使用codepen填充并不能使用chrome，但在firefox中很好用

codepen： http://codepen.io/anon/pen/JEOZBN

HTML

        <div class="ground">
        <img src="http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620608/ground_dhn37w.png" />  

        <!--nav menu-->
        <ul id="menu">

            <li id="home"><a  class="current" href="index.html">Home</a></li>
            <li id="about"><a href="about.html">About</a></li>
            <li id="audio"><a  href="audio.html">Audio</a></li>
            <li id="art"><a  href="design.html">Art</a></li>
            <li id="threed"><a  href="modeling.html">3d</a></li>
            <li id="coding"><a href="coding.html">Programming</a></li>

        </ul>
    </div>

和css

        .ground{
    position:fixed;
    left:0px;
    bottom:-1%;
    height:auto;
    width:100%;
    background:#999;
}

    /*nav menu */
#menu{
    position: fixed;
    list-style:none; 
    margin: -5% 0% 0% 18%;
}

#menu li{
    float:left;  /*--- Make the list go horizontal ---*/
    margin:auto;

}

#menu li a{
    display:block;
    text-indent: -9999px; /*--- Push the text off screen to hide text---*/

        padding-left: 10% !important;
    padding-right: 10% !important;

}
#menu li#home a{
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/home_menu_svyjuj.png) no-repeat;
    width:150px;
    height: 75px;

}
#menu li#home a:hover{
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/home_menu_hover_g4rwhe.png) no-repeat;
}
#menu li#home a.current{
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/home_menu_hover_g4rwhe.png) no-repeat;
    cursor:default;  /*--- Show pointer instead of hand cursor for the current page ---*/
}

/*About*/
#menu li#about a{
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/about_menu_jcz8yx.png) no-repeat;   
    width:150px;
    height: 75px;


}

#menu li#about a:hover{
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/about_menu_hover_uurcba.png) no-repeat; 
}

#menu li#about a.current{
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/about_menu_hover_uurcba.png) no-repeat;
    cursor:default;  
}


/*Graphic design*/
#menu li#art a{
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/art_menu_mbywzq.png) no-repeat; 
    width:150px;
    height: 75px;

}

#menu li#art a:hover{
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/art_menu_hover_afaypq.png) no-repeat;   
}

#menu li#art a.current{
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/art_menu_hover_afaypq.png) no-repeat;
    cursor:default;  
}

/*Modeling/Animation*/
#menu li#threed a{
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/3d_menu_dptfpv.png) no-repeat;  
    width:150px;
    height: 75px;

}

#menu li#threed a:hover{
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/3d_menu_hover_pqnxfs.png) no-repeat;    
}

#menu li#threed a.current{
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/3d_menu_hover_pqnxfs.png) no-repeat;
    cursor:default;  
}

/*Programming*/
#menu li#coding a{
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620608/programming_hzslwa.png) no-repeat;  
    width:150px;
    height: 75px;

}

#menu li#coding a:hover{
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620608/programming_hover_crywht.png) no-repeat;    
}

#menu li#coding a.current{
    background: url(.http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620608/programming_hover_crywht.png) no-repeat;
    cursor:default;  
}

/*Audio*/
#menu li#audio a{
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/audio_vvgdur.png) no-repeat;    
    width:150px;
    height: 75px;

}

#menu li#audio a:hover{
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/audio_hover_bnrvb0.png) no-repeat;  
}

#menu li#audio a.current{
    background: url(http://res.cloudinary.com/ddoewrnb0/image/upload/v1485620607/audio_hover_bnrvb0.png) no-repeat;
    cursor:default;  
}

非常感谢任何帮助谢谢。

奇怪的<li>填充问题chrome（填充只在chrome中有效）

0 个答案: