Question

我正在创建一个网页，而css和html相当简单。但是，在Chrome中，并且仅在100％缩放时，当我将鼠标悬停在导航栏项目上时，容器div颜色的一小部分保持不变。如果我更改缩放级别或使用其他浏览器，则不会出现此效果。任何想法：代码如下。

HTML：

 <html>
 <head>
     <link rel="stylesheet" type="text/css" href="main.css">
     <title>Site Title</title>
 </head>
 <body>
     <div class="img_div" id="visible_div1">
         <a href=""><img src="images/logo_transparent.png" class="logo_img" id="img1"/></a>
     </div>
     <div class="nav_bar_div" id="visible_div2">
         <ul class="nav_bar" id="ul1">
             <li><a href="">Home</a></li>
             <li><a href="">Services</a></li>
             <li><a href="">Contact</a></li>
             <li><a href="">About</a></li>
         </ul>
     </div>
     <div class="main_div" id="visible_div3">
     </div>
 </body>
 <footer>
     Footer Text
 </footer>

CSS：

body{
    background-color: #5d5953;
    font: arial;
    color: white;
}

.img_div{
    position: relative;
    margin: auto;
    height: 10%;
    overflow: hidden;
    background: white;
    width: 60%;
}

.logo_img{
    top: 10%;
    float: right;
    height: 80%;
    padding: 0 2% 0 2%;
    position: relative;
}

.nav_bar_div{
    width: 60%;
    background: #ff9900;
    margin: auto;
    padding: 0;
}

.nav_bar{
    list-style-type: none;
    margin: auto;
    overflow: hidden;
}

.nav_bar > li{
    display: inline-block;
    margin: 0;
    padding: 1%;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
}

.nav_bar > li:hover{
    background-color: white;
}

.nav_bar > li > a{
    display: block;
    text-decoration: none;
    font-family: arial;
    font-weight: bold;
    color: white;
    font-size: 2em;
    margin: 0;
}

.nav_bar > li:hover a{
    color: #ff9900;
}

.main_div{
    background-color: white;
    color: black;
    width: 60%;
    height: 85%;
    margin: auto;
    background-image: url("images/welcome_image.jpg");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;

}

footer{
    background-color: #ff9900;
    font-family: arial;
    width: 60%;
    margin: auto;
    text-align: center;
    padding: 0.5% 0 0.5% 0;
}

示例（Chrome）：

NavBar Issue In Chrome

示例（IE）：

NavBar Correct In IE

Div只在Chrome中发生奇怪的反应

0 个答案: